I have with inline-block property in Firefox and probably in IE also. I am expecting the same result as I am getting in Chrome.
Chrome desktop screenshot
Chrome and Firefox tablet (I have to keep "A" and "BC" together in tablet view)
Here is a problem with Firefox desktop view. As you can see E is not visible in screenshot. I google it but did not find the solution. JSFiddle
HTML
<div class="text-center">
<div class="text">
<div class="col-first">A</div>
<div class="col-last">
<ul class="links">
<li>B</li>
<li>C</li>
</ul>
</div>
<div class="col-middle">
<ul>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</div>
</div>
</div>
CSS
ul{ margin:0; padding:0; list-style:none}
.text-center{text-align:center}
.text{ display:inline-block}
.col-first {
float: left;
padding-right: 20px;
}
.col-last {
float: right;
}
.col-middle {
overflow: hidden;
white-space: nowrap;
}
.social li{float:left}
.col-middle li{ display:inline-block; padding:0 17px}
#media(max-width:768px){
.col-first {float:none;display:inline-block; padding-right:10px; vertical-align:top}
.col-last {float:none;display:inline-block}
.col-middle { width:100%}
}
You can see what is going on if you mess around with column width.
Essentially, is being created by the browser at one width (in my case:142px and the content inside of that div works out to be about 182px), so the browser is "tucking the E off of the page" because it won't fit in the space allotted for it.
This div size issue is caused because the size of div is determined when chrome loads, and is not checked again by chrome. You can see this by making your chrome width very large(zoom way out with the browsers functionality) and then refresh the browser. Your e will appear as desired, but if you make your browser narrower, and the wider again, the media query will reset the size of that div, and it will not get set back making the div disappear.
You can fix this by setting the width of to be greater(or equal to) using a relative width(eg .text{ display:inline-block;width:30%;}) or changing the list structure.
Related
I have a strange issue with google chrome:
With the following code:
<li class="smallAds fleft">
<a href="news">
<img class="addBorder" src=".." alt="Dialetu news!" />
</a>
</li>
The li element on firefox and other browsers is 190px width but on chrome is 190.016px. This small diference is enough to ruin the layout.
Anyone knows why this happens?
This only happens on Chrome for mac, on windows it works perfectly. Also my css rules don't have the width for the li element, since it should inherit the width of the img.
The relevant CSS here is the one associated with the image, since the above elements don't have any specific style:
#afterSlideShowSection ul li img {
border-right: 2px solid #fff;
box-sizing: border-box;
height: auto;
margin-top: 2px;
width: 190px;
}
Seems to be an issue in chrome:
https://code.google.com/p/chromium/issues/detail?id=491328
I am creating a CSS centered horizontal list for our team's site. It's unfinished, but here is a demo of how it looks so far: http://marbleblastultra.tk/welcomeguest.htm
In Firefox, the list looks how I intend it to look.
In IE, it's not perfect, but it's nothing that I can't fix later on.
However, in Chrome, the longer text is overflowing outside of the
items... until I right click on them...
or until I uncheck float-right in Chrome's inspector, then check it
again.
Such a weird, strange behavior. Right clicking? Why? Google searching reveals nothing. Searching this forum reveals nothing about the phenomenon either.
I am using Chrome 40 for Windows, but it might happen on different versions too.
What makes this list so complicated and unique is each item's background image. I want the text for each item to be centered both vertically and horizontally inside the background image. Easy enough, but the background images have transparent corners, and I need to use padding to push the text into the middle.
The above image shows how each item should look in the centered horizontal list, with the text centered within the blue area, never on top of the transparent corners (highlighted in green).
The above image, however, shows what I see instead in Chrome right now. The text incorrectly overflows outside of the box. Here is a cleaned up code sample from the test page.
CSS:
ul.welcomeguest li {
min-width:150px;
min-height:50px;
vertical-align:middle;
line-height:50px;
white-space:nowrap;
display:inline-block;
background:url(images/button_d.png) no-repeat center;
background-size:100% 100%;
}
ul.welcomeguest li div {
display:inline-block;
padding-left:10%;
padding-right:10%;
}
HTML:
<div style="width:100%" align="center">
<ul class="welcomeguest">
<li><div>Homepage</div></li><!--
--><li><div>Login/Register</div></li><!--
--><li><div>Download Game</div></li><!--
--><li><div>Download Levels</div></li><!--
--><li><div>View Leaderboards</div></li><!--
--><li><div>Info/Tutorials</div></li><!--
--><li><div>Contact Locations/About</div></li>
</ul>
</div>
How may I reliably add padding-right to a display:inline-block'd element in Chrome, if at all?
JSFiddle? http://jsfiddle.net/mh70zn34/3/
ul.welcomeguest li:last-child{
min-width: inherit;
}
I'm sorry :D, Please check it
HMLT : you need remove tag div in
<div style="width:100%" align="center">
<ul class="welcomeguest">
<li>Homepage</li>
<li>Login/Register</li>
<li>Download Game</li>
<li>Download Levels</li>
<li>View Leaderboards</li>
<li>Info/Tutorials </li>
<li>Contact Locations/About</li>
</ul>
</div>
and css:
body {
background-color:#EEEEEE;
}
ul.welcomeguest li a {
min-width:150px;
min-height:50px;
vertical-align:middle;
line-height:50px;
white-space:nowrap;
float:left;
background:url(http://marbleblastultra.tk/images/button_d.png) no-repeat center;
background-size:100% 100%;
padding:0 20px;
}
.welcomeguest li {
display: inline-block;
list-style: outside none none;
overflow:hidden;
}
http://jsfiddle.net/mh70zn34/11/
Note: Can't use padding with percent value in your layout.
I have created a simple navigation bar using html and css. The issue with it is when zoomed in, the structure changes as not all the links can fit in one line. Here is the jsfiddle: http://jsfiddle.net/HamishT/b3Lw4/
Here is the code in case you are unable to access jsfiddle:
<div id="navBar">
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
#navBar {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#5a5a5a;
font-size:12px;
font-weight:bold;
background-color:#eeeeee;
padding:0.1em;
box-shadow: 5px 5px 5px #888888;
}
.nav {
list-style:none;
display:inline;
border-left:3px solid;
}
.nav a {
text-decoration:none;
color:inherit;
padding: 0 20px 5px 20px;
}
.nav a:hover{
border-bottom:3px solid;
}
#order {
float:right;
color:#E65C00;
}
I have tried various ways, none to any success. One way I am wondering about is if I can edit it so that it will flow off the page if it doesn't fit (so only part of the width of the navbar is seen at one time), but I can't seem to work my head around it. Another way I think would be to detect the screen width/zoom and change the structure completely if the available space is too small, but I am unsure if this is possible (I've looked into it, but have not found any that seem to work the way I've described.
Just in case it helps: one thing I have spotted is the floats may be preventing me from being able to fix this.
Are there any ways to fix this and if so, how? I don't mind how it works (eg. flows off the screen or zooms the whole navbar out) so long as it does work. I've been stuck on this for three days now (I'm still new to it all) so any help whatsoever would be greatly appreciated.
The problem is caused because float is considering a 100% width for the navbar. Add a width in pixels to fix the size of the navbar, like this
#navBar {
width: 550px;
}
Although this will cause elements to flow out of current window (and hence bringing the scrollbar). Your best bet in such a case is make stuff responsive and create different styles for different widths.
When you zoom into the page, the size of the viewport is decreasing.
That means you can use media queries to create proper breakpoints:
#media screen and (max-width:600px) {
#navBar {
font-size:5px;
}
}
The 600px mark works well in my test case. But you can't reproduce it via jsfiddle. 5px aren't too small since you're zoomed in. The best approach however would be using em values instead of px since they allow to change the reference font-size: body { font-size:0.9em; }. This will be inherited by any other element.
I have found a solution (it may not be of use to everyone who sees this, but is one alternative solution to the issue). I put the li element that floats right in a separate div so that when zoomed in it will not drop below the others or overlap. Instead the other li elements will drop down before they overlap, whilst still working properly.
From the HTML, the #order element (float right) is in a div before the other li elements put into a new div.
<div id="navBar">
<div>
<ul>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
<div>
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
</ul>
</div>
</div>
Here's a working jsfiddle to show what I mean: http://jsfiddle.net/HamishT/3pd5Z/#base
I've created a top level menu with dropdowns but the drop down isn't coming to the front in IE. Chrome, FF, and Safari work great.
My code looks like this:
<li id="search"><a href="#search" class="drop" >Search</a>
<div class="drop2columns dropcontent">
<div class="col_2">
<ul>
<li id="search_basic">Test1</li>
<li id="search_advanced">Test2</li>
</ul>
</div>
</div>
</li>
The css files look like this:
#menu .drop2columns {width: 130px;}
#menu .col_2 {
display:inline;
float: left;
position: relative;
margin-left: 15px;
margin-right: 15px;
z-index: 9999;
}
#menu .col_2 {width:130px;}
What am I missing? Like I said this only happens with IE (versions 7,8, and 9)
z-index and IE was always a nightmare.
There's several workarounds about, see
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
for one of them.
z-index doesn’t work correctly in Internet Explorer: positioned elements create a new stacking context, starting with a z-index of 0. To get around this you can make the parent element positioned (e.g., position: relative), and set its z-index to a value higher than that of the child.
I've submitted this to the Webkit bugzilla (including full CSS and HTML) a week ago but didn't receive a response so far. In the mean time, I'd like to know if it's me or Webkit doing something strange. I already found a workaround, just looking for answers on what's exactly causing this difference.
Here's what I'm experiencing:
(source: mindcontrolled.nl)
Tested in Chrome 10.0.648.204, Safari 5.0.3 (7533.19.4), Firefox 4.0 and a version of IE 8.
This is the related code. I already isolated this code in the HTML to see if surrounding objects caused the trouble but the problem remains.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[...]
<div id="top">
<div id="logo">
<strong><span style="color: #005288;">pre</span><span style="color: #00aeef;">view</span></strong> <span style="color: #fcaf17;">website</span>
</div>
<div id="topmenu">
<ul>
<li><span>over</span> ons</li>
<li><span>onze</span> partners</li>
<li>contact</li>
<li>helpdesk</li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
And the CSS:
#container, #top, #contentcontainer {
padding: 12px;
}
#logo {
float: left;
margin: 0;
font-size: 2em;
letter-spacing: -2px;
}
#topmenu ul, #mainsubmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#topmenu li, #mainsubmenu li {
display: inline;
}
#topmenu li {
margin-left: 20px;
}
#topmenu li:first-child {
margin-left: 0;
}
#topmenu a {
color: #005288;
}
#topmenu a:hover {
color: #00aeef;
}
#topmenu a span {
color: #005288;
}
I started by measuring all the divs to see if they had the same, auto-calculated sizes in both Gecko and Webkit, and they all have the exact same measurements for width (but of course the height is different on Webkit). It's 390 px in Chrome's Firebug lite as well as in Firefox (4) DOM-inspector.
Even if those 390 pixels wouldn't have been enough to fit the full list, the div could simply have expanded to the left. This could perhaps be the case when fonts render a little differently or
What's also strange is that if I remove
#topmenu li:first-child {
margin-left: 0;
}
from the CSS, that doesn't do anything to the position of the first element in the list. Instead, it changes the position of the LI on the second line! "Helpdesk" will then align with "Over ons" strangely enough.
My workaround:
If I define a fixed width for the topmenu DIV of at least 390 (current width) plus 20 pixels (the margin I remove using first-child) for a minimum total fixed width of 410 pixels, all elements stay on the same line.
Love to hear what everyone has to say on this.
I created a jsfidle and tested it in Chrome and Firefox, but I can't reproduce your findings. Have you perhaps got more/different html/css than the fragments you posted? I get basically the same thing in both browsers and the margin applied on #topmenu li:first-child does what it is supposed to do in both as well.
I have Chrome 10 and Firefox 3.6.16 on a Mac with Snow Leopard.
This is Chrome:
And Firefox:
I've figured out what's wrong: you're using an explicit web page width. Because of this, the last item doesn't fit even if the browser window is wide enough, because you aren't giving it enough space.
To fix this, don't specify a width for your web page and redo your CSS to adapt to the width of the browser window.