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
Related
To start off with, I'm quite new to CSS still so I hope I haven't done anything horrendously stupid.
Basically, I have a design I'm doing built using Pure and the width is playing up in Google Chrome, while it works as intended in Firefox.
Here's a link to what I've done: http://egf.me/Rushd/rushdtest.html and screenshots:
Firefox: http://i.imgur.com/mn3GIbT.png
Chrome: http://i.imgur.com/44jLC6J.png
If you have a look at the page source, I haven't really done anything in my own CSS to change anything (I commented it all out as a check just to be sure) so I'm guessing I'm somehow using Pure wrong, since their own site renders fine on Chrome.
Also, inspecting the elements with Chrome's dev tools show that the div elements which should be next to each other have widths which add up to less than that of the parent. And nothing there seems to have buffers or padding. Also, if I manually reduce the widths to be very very slightly less, Chrome seems to magically fix everything.
The problem is that a space is rendered between your child divs.
The issue is neither margin nor padding - it's actually caused by the whitespace between your div tags in the HTML code!
Place the tags directly adjacent to eachother without any whitespace and your problem will be solved ;)
Example code
<!--whitespace in HTML = renders as a space between the divs-->
<div></div>
<div></div>
<!--no whitespace in HTML = renders edge to edge-->
<div></div><div><div>
I am pretty good with css, but can't figure out why my menu is being destroyed by IE7. Looks perfect in all other browsers I tested. First image link is correct. Second image link is how it looks in IE7.
http://www.asingularcreation.com/Forums/download/file.php?id=8368&mode=view/ie8+.jpg
http://www.asingularcreation.com/Forums/download/file.php?id=8367&mode=view/ie7.jpg
Here is the page: http://www.asingularcreation.com/calls-to-artists.php. Any help would be greatly appreciated.
You do not need to float (or clear) the menu container. It looks like it is causing IE7 to calculate the width incorrectly which forces the menu to flow down, underneath the sub-menu.
<div style="height:40px; line-height:40px; float:left; clear:both"><!--Main Menu --></div>
Removing the float and clear properties fixes the display in IE7 and also still works in Chrome and IE8 and IE9.
There is a lot of inline styles in the example page so I would also look at moving the CSS into an external file if possible.
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.
The page in question is here: http://www.allweatherwood.com/test-page/
If you look at it in Internet Explorer or Firefox, you should find that it looks perfectly fine. But in Chrome, for some reason, it is a completely different animal. What in the world is going on? It looks like the navigation area is getting bumped down slightly, and that is causing the strange issue with the main content area being moved to the right side of the page? And why is only a small sliver of that area being shown? I am positively stumped. Have tried looking at the code and I just can't figure out where the issue is.
CSS can be found here: http://www.allweatherwood.com/wp-content/themes/allweatherwood/style.css
Any help on this is MUCH appreciated!
If you set width: 960px; or even width: inherit to your content-wrapper div it looks alright. For whatever reason, webkit isn't calculating the width of that div they way it's expected when it's overflow is set to hidden.
Perhaps someone knows exactly why?
The elements in the main menu are all float:left, and so the content floated on to these elements. Insert
<div style="clear: both"></div>
after the header to stop further elements from floating.
By the way, if you declare your HTML as XHTML 1.0, please serve valid XHTML 1.0.
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.