Way back in the day, we had to deal with browsers adding white space between elements if in the source markup we also had white space.
I thought that issue had all but disappeared but I rant into a situation today where the problem still exists. What's odd is that the problem isn't confined to a particular browser. It shows up the same problematic way in Firefox, Safari, Chrome and Opera and only slightly differently in IE.
Sample CSS:
<style type="text/css">
li {
display: inline;
background: pink;
margin: 0px;
padding: 10px 0px;
}
li a {
background: green;
margin: 0px;
padding: 0px;
}
</style>
Sample markup:
<ul>
<li>
hello
</li>
<li>
world
</li>
</ul>
<ul>
<li>hello</li>
<li>world</li>
</ul>
<ul>
<li>hello</li><li>world</li>
</ul>
Only that last UL appears the way I'd like it to appear...with the A tags spanning the full width of the container LI tag.
Given the consistency across browsers, this maybe is actually rendering as it should? Short of reverting to old comment hacks (starting a comment on the end of one line and expanding to the beginning of the next) anyone know of a workaround for this or why this is doing what it does?
Ideally, I'd float my LI's instead, but due to some other issues keeping then inline would be preferred.
Yup, whitespace is whitespace when it comes to inline elements. That's almost always exactly what you want. Take, for example, the following:
<p>I <em>really</em> <strong>really</strong> want that whitespace.</p>
Would suck pretty hard if that ended up rendered as:
I *really***really** want that whitespace.
If all the browsers render it a certain way, it's pretty likely that they're right and you're wrong. That goes double if all browsers except for IE render it a certain way...
I believe this is by design.
You have included white space (even if it is carriage returns) in your source so the browser is rendering this faithfully. I doubt there is a way around this apart from ensuring there is no white space between your elements.
You can just set the font-size of the container to 0, for example put that into a div and then set the propper font-size in the LI item
Related
I have a typical li element with some basic styling (e.g. border radius etc) and I noticed that at 400% zoom (there are zero offset observed at 100%), there is some significant differences in how firefox decided to render my text when zoomed in. It looks like it's slightly offset to the top. Is there anything I can do to mitigate this and ensure that my buttons looked exactly the same?
I also used joshwcomeau's custom CSS reset technique https://www.joshwcomeau.com/css/custom-css-reset/
HTML:
<body>
<ul>
<li>
<div class="button">Note</div>
</li>
</ul>
</body>
CSS:
li .button {
padding: 4px 9px;
}
I've spent a few good hours debugging myself, and a few good hours researching but nothing seems to be solving my problem. I have a caption in my header that is supposed to be cut-off at the bottom, which looks fine in Safari and Chrome, but in Firefox it is positioned much higher:
First window: Firefox
Second window: Safari (chrome renders the same)
I spent about an hour and a half changing everything around in my CSS thinking it had to do with other elements around it, but made no progress. Finally I decided to make an extremely simplified version to see what the problem is:
First window: Firefox
Second window: Safari (chrome renders the same)
Same exact thing. I have a CSS reset applied so that is not the problem. I've tried setting the line-height, but that didn't fix it. I've tried every value for the CSS display property. Nothing is fixing this.
HTML/CSS for test example above:
<div class="test">
<h1>Test</h1>
</div>
.test {
margin: 0;
padding: 0;
width: 100%;
height: 185px;
line-height: 185px;
border: 1px solid red;
}
.test h1 {
font-size: 12em;
}
My website can be viewed at samrapdev.com.
Quick link to CSS stylesheet
In short, I need to figure out how to get both browsers to display the text at exactly the same height
Try and specify a font-family in your stylesheet though it's not pixel perfect
#header .youAreHere h1
{
...
line-height:1;
}
line-height must be set on h1, unless you have something like
* {line-height:inherit;}
Even if you take a webfont and define the line-height of your element you can have variations due to the line-heights of the other elements.
What works for me is to define the line-height of the body on the top of using a webfont.
Also do not forget to reset margins and paddings for all elements you're using. A good trick is to use a reset.css before your actual style sheet (you can find some at http://www.cssreset.com/)
body{
line-height: 1;
}
I have the following html:
<div id='social'>
<img src="twitter.png" alt="Twitter"/>
</div>
<h1>Heading</h1>
I would like the image to sit directly on top of the heading so I used:
margin-top: -25px;
This displays correctly in Chrome and Safari. In firefox however the head and image overlap. With a bit of playing around it seems that Chrome and Safari create an empty space between the divs.
How do I arrange my page/css so that it displays without a space between the image and heading?
It's the <h1> tag with built-in margins. lol~ Style the <h1> tag with margin:0px; padding:0px;
James is right - the tags have margins by default, *which also vary between browsers. You can either override them all, or use a CSS reset such as Blueprint that will clear all default browser CSS styles so you can define them from scratch yourself.
I can almost guarantee that if you'll end up having spacing issues with CSS on any bigish project, it'll be the lack of a reset :)
Also know that browsers parse tabs and newlines as whitespace - and there's little you can do about it. If you have horizontal elements on your web page that are on newlines in the source, they'll be separated by a space (sometimes this isn't what you want).
I think this will help:
#social img { display: block; }
or
#social img { vertical-align: top; }
Live demo: http://jsfiddle.net/9z6BM/1/
I'm attempting to create a max-width bounding box which will both wrap text (on spaces, no word-breaking allowed) and shrinkwrap to the width of the longest line of text. For a demo of the various shrinkwrap methods, see http://www.brunildo.org/test/IEMshrink-to-fit.html
I chose the "float" method, but in my testing, none of the methods accomplished my desired effect.
In the example code below (also available with live-preview at jsbin), I show what happens when you let the words wrap themselves, and what happens when you insert a <br /> line break tag. Using <br /> manually results in exactly the effect that I'm looking for, while omitting it wraps the text correctly, but forces the white box to take the entire max-width as its width, which I'd like to avoid.
<style>
div#wrapper { background: #ddd; padding: 10px; }
header { display: block; float: left; max-width: 320px; background: #fff; margin-bottom: 20px; clear: both; }
#wrapper:after { content: " "; clear: both; display: table; }
</style>
<div id="wrapper">
<header>
<h1>Diane Von Furstenberg</h1>
</header>
<header>
<h1>Diane Von<br />Furstenberg</h1>
</header>
</div>
Here's a screenshot of the problem with some elaboration:
I've created a JS method to manually insert the <br /> tag as a stopgap measure, but I imagine there must be some way to do this properly using only CSS/HTML. Thanks for the help!
Changing the display of the h1 to table-caption is close to what you want, in Google Chrome. But it's not perfect and I can't really recommend that as a solution wholeheartedly, mainly due to not testing it in any other browsers.
Not sure if browser behavior has changed since the earlier 'table-caption' answer was posted, but it does not currently work (using Chromium 41):
In reality, it seems the desired behavior is not possible with pure CSS (as of 2015). Further explanation and a lightweight Javascript workaround are available in another SO question: max-width adjusts to fit text?
I have an ordered list which uses large Georgia for the numbering and smaller Arial font for the text (as recommended at How to align two columns of text in CSS). I am using p tags within the li's so i can set the font size which also sets the associated line height (ensuring that there is normal line spacing if the li's run over more than one line). This is nearly fine, however in firefox the spacing between the bullets is much tighter than any other brower, all others seem to be adding a margin above the p tags despite explicitly setting the margins to 0. When i look at it using developer tools in Chrome it seems to add -webkit-margin-before: 1em;
-webkit-margin-after: 1em; to the p tags which are not overridden. This may not be the cause as it also happens in non webkit browsers apart from FF and everything else i've read says these are overridden by setting the margins (which are set in the code below and at the top of my css file with an all element css margin reset). I would be immensely grateful if anyone could point out why I'm getting more spacing on all non FF browsers as I've been trying to work it out for ages and just cannot see why it's happening! FYI I have tried explicitly setting the line heights of each element but this has exactly the same effect. You can see the code below.
Thanks so much for your help and for any advice anyone can give!
Dave
ol {
color: #ec008c;
margin: 0;
padding: 0 0 0 1.6em;
list-style-position: outside;
font-family: georgia, serif;
font-size: 16px;
font-weight: bold;
}
ol li {
margin: 0;
padding: 0;
}
ol li p {
font-family: arial, sans-serif;
font-weight: normal;
font-size: 10px;
color: #000000;
margin: 0 0 4px 0;
padding: 0;
display: block;
}
<div id="playlist">
<div id="playlistinner">
<p id="playlisttitle">The List</p>
<ol>
<li class="listitem"><p><strong>Entry 1</strong> - entry details</p></li>
<li class="listitem"><p><strong>Entry 2</strong> - entry details</p></li>
<li class="listitem"><p><strong>Entry 3</strong> - entry details that are much longer and span more than one line</p></li>
<li class="listitem"><p><strong>Entry 4</strong> - entry details</p></li>
<li class="listitem"><p><strong>Entry 5</strong> - entry details</p></li>
</ol>
</div>
</div>
You mention non-webkit, non-Firefox browsers appear to do the same thing. Have you looked using their developer tools? Both IE (except for 7; 6 has it as an addon; 8 and 9 have it included, just hit F12) and Opera have developer tools. Check them out and see what's causing it in them.
Opera puts a 1em top and bottom margins on the <p> element, I don't have a platform that IE runs on, but I assume it does, too. In the code and example you give us, you have no all-element margin reset, so there's nothing to override until you explicitly set the margins.
Another thing you can do is set line-height: 1; to tighten things up farther.
Aso, have you considered restructuring a little? From what you've posted here, your content might be better suited to a definition list.
On a side note, why are you using frames? Not only are they being deprecated in HTML5, but there are several major reasons why they are bad. If you want to have a single file for universal stuff, such as headers and navigation, then have a look at server side includes.
I guess that it could be connected to the line-height of larger font you use in the li element. If I add line-height: 12px to the li-style in Chrome, the spacing looks the same as in FF.
#deshg; first i want to say that use resetsheet. Now the problem is that there is an extra spacing between li in chrome
REASON
1) each user-agent have there own default properties . So, they rendered differently.
2) May be is a structural also for more check this .
solutions
a. use resetsheet.
b. better to give span instead of p.
c. As svanelten said give line-height in your li for more check the links
http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height
Spacing differences between IE7 and Firefox/Opera/Chrome