This div will have a computed height of 104.5px (in most recent Chrome, FF, and IE)
<div><img src="" height="100px" /></div>
This div will have a computed height of 100px
<div style="overflow:auto;"><img src="" height="100px" style="float:left;" /></div>
I used FireBug to look at the DIVs and IMGs, and both IMGs have 0 for margin, padding, and border, yet the computed height somehow is 4.5px bigger in the first instance.
Why is this? It impacts me when I try to layout a page with a consistent vertical grid. Ideally, I'd like to not have to float the imgs.
I tried to look here ==> http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.7.2 and I even tried vspace=0, but that didn't change anything.
Thanks for your help!
clients include their own stylesheets that should be overidden before you try to do any pixel-perfect layouts or cross-browser debugging. Even if you remove all your stylesheets there are still styles on the page.
Try it again with a css reset at the top of your stylesheet. Also, make sure that you're declaring a valid doctype. Use a strict doctype and make sure your code validates if that still doesn't help.
I usually use the meyer web reset with a few minor modifications that suit my workflow.
If other people are seeing 100px then it's likely a client side problem, so hopefully this troubleshoots it for you.
I use Yahoo! CSS Reset to get my browsers all starting from scratch, usually helps.
Look out for a line-height definition at a high level when applied to a div that only contains an image. (for example html {line-height:1.5em;})
You probably still want this line height setting in general for resetting text throughout the site, but try applying line-height:0 just to the div with nothing but an img inside it.
http://jsfiddle.net/kq3Yy/
Setting <div style="display:inline" /> should fix your problem.
There must be more going on here than what you show. How are you measuring these half pixels? What tool are you using? I can see line-height coming into play but you don't show that in your sample.
Related
I'm a real CSS beginner, so please forgive my ignorance. I've been searching around without success regarding something which must be obvious to experienced CSS folks.
Basically the CSS below displays as expected in FF/Chrome/IE8, but not in IE6 (and who knows about other IE versions). In IE6 a friggin horizontal scrollbar keeps being displayed since some elements are overflowing the browser window. My reading seems to indicate this has something to do with padding, 100% width being a problem with IE6, or something... I've added bg colours to better visualise the problem.
I only really want the #ch/div ("head") to fill the browser window horizontally. I suppose it boils down to: why are the div's for bs_ext and cd extending beyond the right-hand browser window, causing the horizontal scrollbar to be displayed?
<head>
<style>
<!--
body{margin:0px 0px 0px 0px}
#ch,#cs{position:relative;width:100%}
#ch{margin-top:0px;height:90px;background-color:#edeff4;border-bottom:1px solid
#dddddd}
#cs{height:55px;width:1024px;border-bottom:1px solid #dddddd}
#cb{width:1024px}
#ci{float:left;width:200px;background-color:#efefef}
#cr{float:left;width:530px;background-color:#cccccc}
#cd{float:left;width:294px;background-color:#dddddd}
#bs{position:relative;float:left;top:18px;left:15px;width:185px;background-
color:#cccccc}
#bs_ext{position:relative;float:left;top:18px;left:15px;width:824px;background-
color:#dddddd}
-->
</style>
</head>
<body>
<div id=ch>head</div>
<div id=cs>
<div id=bs><span>sssssss</span></div>
<div id=bs_ext><span>ppppppp</span></div>
</div>
<div id=cb>
<div id=ci>111<br>111<br>111<br></div>
<div id=cr>222<br>222<br>222<br></div>
<div id=cd>333<br>333<br>333<br></div>
</div>
</body>
I would appreciate any pointers on how to make this work in IE6.
Also, I'd like the bottom border of #cs to be 100% of the browser at all times (it's currently 1024px). But, if I use "100%", then when resizing the browser moves "ppppppp" down - I'd like it to be fixed so that resizing the browser does not change the content position.
Thank you so much for any pointers/assistance
I would not try to make my website compatible with IE6.
IE6 is over 10 years old, you should use your time checking your code with newer browsers.
If you insist to make it IE6 compliant, you should look into using different stylesheets for different browsers.
Check this link out: http://www.thesitewizard.com/css/excludecss.shtml
Short answer:
bs_ext is 824px wide, so any browser (not just IE6) will display a scrollbar if browser size goes below that
cd is positioned 200+530px from the left and is 294px wide, meaning it extends to 1024px which is too wide (any browser uses about 16 pixels of the window's width to be used for a vertical scrollbar)
Also:
Go with bvd's suggestion; don't try to optimize for IE6 too much
Try to build the site in IE6 first and modern browsers later.
Solutions:
The following CSS will remove any scrollbars on the html/body of your page. A terrible fix, as you're destroying the user's tools to navigate your site:
html, body { overflow: hidden }
Also, if you want a footer that sticks to the bottom of the page (I'm not sure if you do but it looks that way), try to follow this tutorial:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Lastly, if you want more help, I suggest you post a picture or design of what you're trying to achieve. A lot is possible in IE6, if you know how to work around CSS imperfections that browser has.
A final tip is modernizr: http://www.modernizr.com/
Modernizr solves a lot of IE6 issues, but not all. Also, you'll have a JavaScript dependency in your website which will affect at least IE6 and 7 users.
Good luck!
To remove the scrollbar you could give this property to #CS {overflow: visible;} it may fix the IE6 Scrollbar issue.
As mentioned by BVD you shouldn't be checking for compatibility in IE6, you should install the latest versions of IE i.e., IE9. IE9 provides a Developer Tool which allows you to check the html page for compatibility in IE7, IE8 and IE9. You should ignore IE6 and focus on compatibilty from IE7 version onwards. To get an idea of which browsers are popular check NetMarketShare
The naming conventions you've used for the Div's are not right, check this article it may help you understand what I'm talking about css naming conventions.
I am working on a small project, and am having two tiny problems with CSS.
I have played around with everything to no avail.
1) In IE6 the content and logo is not lining up correctly.
2) In Firefox, the tooltip box fixed at the bottom of the page (which degrades in IE6) although styled as width:100%; is not spanning the whole screen. There is a gap on the left hand side.
These problems can be seen by viewing http://gua.com/wd/ in the respective browsers.
If anyone could advise as to what has gone wrong, and why, it would be greatly appreciated.
Thanks
for firefox: Yyou can add left:0; for #bottom
for internet explorer: I see your menu to be wrong not the logo. To solve this just add margin:0 for #top-nav
You should ideally be using some sort of css reset stylesheet to overcome specific browser idiosyncrasies.
In your case appending a margin: 0px; to your body should do the trick (For Firefox). IE6, well, its usually best left to a IE6 specific conditional stylesheet.
"100%" means "100% of the parent box's client space". Not "100% of the entire viewport".
And IE6's CSS support is f*cked beyond sanity. If it doesn't work, use absolute positioning or whatever else it takes in a special stylesheet and include it with conditional comments.
I just came up with this, it seems to work in all modern browsers, I just tested it then on (IE8/compatibility, Chrome, Safari, Moz)
HTML
<img id="my_image" alt="my text" src="images/small_transparent.gif" />
CSS
#my_image{
background-image:url('images/my_image.png');
width:100px;
height:100px;}
Pro's:
image alt text is best-practice for accessibility/seo
no extra HTML markup, and the css is pretty minimal too
gets around the css on/images off issue where "text-indent" techniques hide text from low bandwidth users
The biggest disadvantage that I can think of is the css off/images on situation, because you'll only send a transparent gif.
I'd like to know, who uses images without stylesheets? some kind of mobile phone or something?
I'm making some sites for clients in regional Australia (hundreds of km from the nearest city), where many users will be suffering from dial-up connections, and often outdated browsers too, so the "images off" issue is an important consideration.
are there any other side effects with this technique that I haven't considered?
edit: Just wanted to add the extra info that I'd use this over a normal image tag because
A. I can use css-sprites
B. I can generate css with php that alternates background-image sources between different sub-domains using a single array
C. I like the way that resizing the image now doesn't stretch or distort it so it behaves like everything else on the page.
What is wrong with normal image tags? img tags are meant to be used when your content has images in it, and CSS shouldn't take any part in what the actual content is. On the other hand, presentational images should be set as background-images to divs and such and then handled via CSS so that they don't interfere with the content and structural markup.
There's no scenario where you'd need to do something like that.
If you want an image replacement technology that degrades gracefully when CSS is off, you can use the old faithful text-indent technique:
#element {
width: 100px;
height: 100px;
background: image(pic.jpg);
text-indent: -9999px;
}
<div id="element">This text will show if CSS is off, otherwise an image is displayed.</div>
Tatu is right, though you don't seem to need indent. Just put the image you want as the src of img. Then you get text when images are off (and note that alt text can styled using CSS on img), and have the image displayed when they are being fetched.
The big thing about 'image replacement methods' is because people want the text out of the alt attribute when you are styling headings so they get search-indexed correctly. img on its own though will do the job without any CSS or additional markup.
Well I use this kind of technique in h1/h2 tags when clients want strange fonts. Heres how I do it http://flowdev.tumblr.com/post/1187111884/the-power-of-h1-and-h2-tags
Works in all browser as far as I know.
Ok, I'm kind of new to standards of web design here. :P
Is this the correct way of designing a site with CSS?
Each "Box" has it's own DIV tag, with it's own settings. I'm guessing the background-image: of a box inside of the heirarchy gets precedence over the outer box, right?
A "Box" that has the background image of the site.
Another smaller "Box" that acts as the content container of the site.
And other smaller "boxes" that act as containers for particular things inside of the content "Box".
Here's a little picture about what I mean:
OK, some simple points to clarify for you...
The "whole site box" is probably going to be the body element of the page. You could add a whole wrapper div for it, but it would not gain much in the first instance.
The use of a "content box" is ok, but I would be wary of using it unless you want to specifically limit your site to a fixed width layout.
The other boxes can be added directly to your body element, and positioned/styled individually. You'll probably end up with something like this...
<html> <*-- include your doctype and stuff, obviously -->
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="sytle.css" />
</head>
<body>
<div id="header">Your site header content here</div>
<div id="mainNav">navigationhere</div>
<div id="content">main content here</div>
<div id="footer">footer stuff here</div>
</body>
</html>
There are plenty of resources for positioning, etc, around. I found the best way to learn (although I'm very rusty on it these days) was to look at examples, unpick what they were doing and have a go myself. Try looking at http://meyerweb.com/eric/css/ and http://www.csszengarden.com/ for a starting point of what's possible.
HTH, but I'm sure someone with up-to-date html skills will be along in a minute.
I totally agree with samuil on his point that you shouldn't have functional divs. That's what got us into the whole mess in the first place (if you don't know what the mess is, do a search regarding tabled-layout).
BUT
something to be aware of: If you set an outer-element (like body or even html, but careful) to relative, it will require an explicit height or it may shrink up or no longer contain (visually) the child elements. But if you set the body to a height of 100%, it will be 100% of the window not the document, meaning that when the user scrolls down, the body doesn't scroll with them. It's very weird and annoying.
I honestly recommend just not worrying about layout. Make the copy look good and clean and people will hang around (see: this site). Obviously there are some aspects that make a site more usable or attractive, but I always use the rule of thumb: if I turn everything off, will it still work and will it make sense? I'd rather a page look boring but readable with no CSS and then start messing with the layout and colors then have a site that turns into a pile of divs and p's it one browser (cough, IE) doesn't play along.
Your approach has minor flaw - you shouldn't put "Content Box" div in your HTML unless it has some meaning. There already is body element for that purpose (in good browsers html and body elements can be styled). However, with high probability this flaw is insuperable, as currently commonly used browsers suck in supporting some important features of CSS 2.1.
Except for that your design seems to be correct.
I think the "big" (green) content div is actually a wrapper div that helps you set the width of your website (most wesites nowadays prefer not to use all of the available screen width - stackoverflow is an exception).
I am trying to build a page in .NET MVC (not that this matters) where a div is divided into left and right containers using a float. When I try to clear the float using anything other than a <b> tag (such as <div> or <br>), IE8 will not render the page correctly (it's as if it ignores the style in the tag). If I use the <b> tag, Chrome and Firefox do not render the page correctly. I have been over my HTML to make sure that I dont have any stray tags and have run it through W3C markup validator and it passes XHTML 1.0 strict. I am at a loss for what could be going on here. I realize that there are better ways to clear floats (such as using the :after pseudo element) but i need something simple and clean. I was wondering if anyone had an idea as to what might cause this to happen, maybe something in the stylesheet? Thanks in advance for any help.
I found it. Stupid IE. I had to set the height of my div that housed the two floated containers to 100%. I guess that Mozilla and Chrome assume a height of 100% where IE does not. I should have been more explicit. The problem was that when i used a DIV tag to clear the floats, nothing was showing up in my container or the background color would not fill. I had to install IE developer toolbar to figure out what was going on.
<div id="floatcontainer" style="width:100; height:100%;">
<div id="floatleft" style="float:left; width:50%; background-color:#454545;"></div>
<div id="floatright" style="float:right; width:50%;"></div>
<div id="clear" style="clear:both;"></div>
</div>
Try the clearfix method: http://www.positioniseverything.net/easyclearing.html
jimbo, I recommend using classes instead ids, and having all styles in your stylesheet. Also this should illustrate well what float and clear do http://goo.gl/uxu8G