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.
Related
I have a button , well .. actually a <li> acting as one. I shape it with the padding without giving it any height. For a click effect, I set font increase +1 on active. Now, on Firefox it expands the button, which is not what I want. On Chromium it does it right and keeps the button size constant while increasing the font size. I can fix this with setting the buttons height - no problem. Although it is not ideal.
But I am just wondering what is the correct behaviour? Should the font size expand the button or should it not?
I assumed that with IE out of the way, two compliant browsers should agree on how to render stuff in common scenarios.
Thanks.
UPDATE
I do apologise for not including the CSS. I thought the wording is simple enough. Here is the sample ...
<!DOCTYPE html>
<html>
<head>
<title>Basal</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="base2.css">
</head>
<body>
<nav>
<ul>
<li> Create </li>
<li> Read </li>
<li> Update </li>
<li> Delete </li>
</ul>
</nav>
</body>
</html>
And the CSS ...
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
nav ul {
display: flex;
border: 2px solid #232B2B;
border-radius: 5px;
}
nav ul li {
flex: 1;
display: inline-block;
border-right: 2px solid #232B2B;
text-align: center;
padding: 5px 0;
cursor: pointer;
background: #685642;
font-size: 16px;
}
nav ul li:last-child {
border-right: 0;
}
nav ul li:hover {
background: #74695C;
}
nav ul li:active {
font-size: 18px;
}
In Firefox, It expands the <li> container every time I click it. In Chromium - it does not. In Chromium it just increases the font size keeping the container size constant.
Firefox - 28.0
Chromium - 34.0.1847.116 (260972)
The height of an element generally depends on the height requirements of its content. The details have intentionally been left browser-dependent in CSS specifications. Increasing font size may or may not increase the height requirements; typically, an increase of 1px does not, an increase of 2px does.
For the given code, both Firefox and Chrome (34.0.1847.131, Win 7) increase the height of the li element when it is activated. The difference is that on Chrome, the increased height remains even when the element returns from active state to normal state. This is probably unintentional and might be classified as a bug. (The effect can perhaps be seen better if you add :active { background: red }.)
In general, you should not expect different browsers to assign the same height to an element unless you explicitly set the height.
If you're increasing the font size, it would make sense that when the font gets large enough, the "li" container will also have to increase its size to keep it contained.
I test your question in chrome, and it does the same as it in Firefox.When you set font increase +1 on active, you must set the active button's attribute "padding-top" or "padding-bottom" decrease the same size.
Browser calculate button's height as follows:
height=margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom
You can search CSS box model to see more detail.
This is driving me a bit nuts...I'm working on a site and trying to get a <ul> to render consistently across Safari (v 7.0.1) and Firefox (v 25.0.1). I've simplified the CSS and HTML just about as much as I can... there is still a difference in the distance between the "job title" (the <a> tag) and "location" (the <p> tag) of several pixels between the two browsers.
Fiddle is at http://jsfiddle.net/7BZGU/7/
Here's my code -- is there something obvious I'm doing wrong? I understand browsers render stuff differently, but I'm not sure why two modern browsers have such a difference when dealing with pretty vanilla code...
HTML
<div id="main">
<div id="current-openings">
<h3>Current Openings</h3>
<ul>
<li>
Junior Risk Reporting Analyst
<p>Chicago, IL</p>
</li>
<li>
Trading Data Analyst
<p>Houston, TX</p>
</li>
</ul>
</div>
</div>
CSS
#current-openings {
margin: 30px 0 10px 50px;
font-family: Verdana;
}
#current-openings h3 {
font-size: 25px;
}
#main ul {
margin: 15px 0 0 0;
line-height: 5px;
}
#main ul li {
list-style-type: none;
padding: 4px 0 25px 21px;
}
#main p {
font-size: 11px;
font-style: italic;
}
I did a couple things that helped the spacing be pretty close!
I removed the line height from your ul: having such a low line height will create a jumble of text once the text wraps)
set the paragraph's margin automatically by doing this:
margin: 10px 0px;
I believe what you are trying to do is align the bullet image, correct? To do this it is best to use:
background-position: 0px 10px;
Doing this eliminates the need for line height anyway!
This helps by overriding the initial paragraph styles and setting them specifically, so it works across multiple browsers.
Hope this helps!
I am trying to build a website and have encountered a tricky issue with li having display: inline-block; property.
My website is: http://www.gypsytours.in/
If you visit this site, on homepage, I have a horizontal list under the heading "Himalayan Packages by Gypsy Tours".
In this list, I have a block element A with display: block; property.
Here are my simplified codes:
HTML:
<div id="menu-board">
<ul>
<li>Elephant Safari Packages in Jim Corbett Park, India</li>
<li>Chopta Tungnath Trekking Package</li>
<li>River Rafting Packages in Rishikesh</li>
</ul>
</div>
CSS:
#menu-board
{
text-align: center;
}
#menu-board ul
{
}
#menu-board ul li
{
float: none;
display: inline-block;
}
#menu-board ul li a
{
display: block;
width: 180px;
height: 130px;
background-color: #C50000;
text-align: center;
overflow: hidden;
}
Now, the issues is: My link-text in 2nd box, is not longer than two lines, unlike the other two boxes where link-text spreads in three lines. This boxes look perfectly fine in IE and FireFox but when I open the site in Google Chrome or Safari, the box in the center (with relatively shorter text) pops down. If I make the text long enough to span in three lines, it comes back to original position. I am not able to figure out how to fix this. My apologies for not being able to put across my issue in simple and short manner. I am relatively inexperienced with web-designing. I will really appreciate if you guys can help me out. Thanks in advance.
Ok, after more digging, I found out that it was a computed float issue.
I believe that adding:
#splash-list ul li a {
float:left;
}
will solve the problem. It may compute very slightly differently on other browsers, but at least they'll be in the proper line.
Hope this helps!
Mason
I'm having trouble with the layout of a simple HTML page. Please help.
Here's the layout I'm going for...
Layout http://img516.imageshack.us/img516/9637/layoutfk5.gif
orange = body
blue/red = frame div
green = header image
black/white = menu div
It looks correct in Internet Explorer, but in Firefox, Safari, and Chrome there's a 4-pixel gap between my image (header) and my div (menu).
Internet Explorer, Firefox, Safari, and Chrome...
Browsers http://img516.imageshack.us/img516/3292/browserszi8.gif
This is my HTML...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
...
<body>
<div id="frame">
<img id="header" src="images/header.jpg" width="700" height="245" alt="" /><div id="menu">
<strong>One</strong> |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine
</div>
<div id="content">
...
</div>
...
</body>
</html>
Notice there's no whitespace between the IMG and the menu DIV.
This is my CSS...
...
div#frame {
background: #FF0000;
margin-right: auto;
margin-left: auto;
width: 700px;
border: 5px #30AADE solid;
}
div#frame img#header {
margin: 0;
padding: 0;
border: 0;
}
div#frame div#menu {
margin: 0 auto 0 auto;
padding: 5px 0 5px 0;
border-top: solid 2px #FFFFFF;
text-align: center;
font-size: small;
color: #88BE34;
background-color: #000000;
}
div#frame div#menu strong {
font-size: medium;
color: #FFFFFF;
}
div#frame div#menu a {
color: #88BE34;
}
Why are Firefox, Safari, and Chrome showing that 4-pixel gap?
It has to do with the default rules for IMG tags.
I recommend always using this in your stylesheet as a default rule:
img{
display:block;
}
My guess is it's the line height of the image-elements line, since IMG is a an inline element. You could probably fix it by giving img#header display: block;.
Anyways, what you should really do is remove the entire image and use a H1-element plus one of the many image replacement-techniques out there.
Edit:
When that is said, your menu should also be marked up as an unordered list (UL).
In "standard" browsers (and in fact IE6 with the proper DOCTYPE!), your image is INLINE mode by default, so it gets spacing as if it was a letter sitting on the baseline of text.
freelookenstein gave the solution to remove the extra spaces due to text alignment of INLINE mode.
It is the solution, but I would be careful about using a display:block by default as most likely that will mess up your typical web page content down the line.
You could either add the display:block property to a class or inline style on your image alone.
Or something like this:
img { display:block; }
p img, ul img, td img /* etc*/ { display:inline; }
Personally I would recommend to limit display:block only to those images you know are used for the site layout, or those that are specifically inset in boxes. In which case often you have already a class on the parent element like:
<div class="imagebox">
<img .... />
</div>
.imagebox img { display:block; }
You should wrap your menu links in an unordered list and then style the items with CSS. There are some reason for doing this:
Structuring your navigation links as a list results in more semantic markup. It better represents the content you are presenting. If you were to view the site with no CSS styles at all (you can do this with the Web Developer Toolbar for Firefox), you would still get a meaningful representation of your site layout. This is especially meaningful if you intend the site to be viewable by mobile browsers.
This may also (slightly) help search engines prioritize the content and boost your ranking.
You can define a style for your list items with a border on one side and some margins to get the "pipe delimited" effect. This will be reusable and makes it easier to change the menus to some other style in the future.
See A List Apart - CSS Design: Taming Lists
There is an example there showing complete CSS for achieving this effect.
I've styled some unordered HTML lists and their heading to look like this in Firefox:
alt text http://img24.imageshack.us/img24/711/screenshot001nij.png
Unfortunately, in IE7, they look like this:
alt text http://img11.imageshack.us/img11/8343/screenshot002e.png
The relevant HTML is
<div class="list-column">
<h4>Types de pêche</h4>
<ul>
<li>Pêche en lac</li>
<li>Pêche en Rivière</li>
</ul>
</div>
And the CSS is:
.list-column {
float: left;
margin-right: 20px;
width: 20em;
}
div.list-column h4 {
background-color: #FDD041;
padding: 5px !important;
}
ul li {
background-image: url(images/arrow.gif);
background-position: 0 11px;
background-repeat: no-repeat;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 6px;
margin-left: -20px;
margin-top: 2px;
padding: 2px 0 2px 18px;
}
I suspect the fact that the div containing the list is floated left is probably the root of my problems, but I'm not sure how to workaround the poor display in IE7?
Update:
I tried adding a 'zoom: 1' property to the 'ul' elements to see if giving the elements 'layout' would fix the problem in IE, but it didn't.
The problem is definitely not related to the rounded corners. I turned them off temporarily but it didn't change anything in IE (apart from the appearance of the corners).
Thanks,
Don
IE and the other browsers have a different default style sheet.
IE indents list items by putting a ‘margin-left’ on the <ul>. The other browsers put a ‘padding-left’ on the <ul>.
So if you want to look the same in all browsers, set both ‘margin-left’ and ‘padding-left’ explicitly on <ul>. In your case, you would want to add something like “margin: 0; padding: 24px” on your “div.list-column ul, ul.round” rule.
(The default list ‘margin-left’ in IE is, to be precise, ‘30pt’.)
A common solution for this is setting the width of the element. This will make IE everything inside the bounds of that width.
I think this is a case of IE-7 auto indending the li's
the easiest way to debug this is to install IE-8; switch to compatible ie-7 mode.
then launch the developer tools from the tools menu
You can then inspect the individual elements and check if there are hidden padding or margins being applied
I think that it can depend from different default padding on ie and firefox. Try to use reset.css in your code if you haven't already done it.
P.s. in ie8 you have developer tools which are similar to firebug. Try to use them and see if you can't understand the issue...