floating divs issue on IE
newbie
Posted: Thu, 2008-05-15 18:28
Heres the html-cum-css code:
<html>
<head>
<style type="text/css">
.div_main
{
width: 860px;
height: 260px;
border: #cccccc 1px solid;
}
.div1
{
float:left; margin:5px;
border: #cccccc 1px solid;
}
.div2
{
float:left; margin:5px 5px 5px 2px;
border: #cccccc 1px solid;
}
.div3
{
float:none;
clear:right;
margin-top:50px;
width:800px;
}
</style>
<body>
<div class="div_main">
<div class="div1">
<iframe width='320' height='250' scrolling='no' frameborder='0' src='some link'></iframe>
</div>
<div class="div2">
<a href="#" target="_blank"><h2>Heading</h2></a>
</div>
<div class="div3">
<p>This is text. -- This is text. -- This is text. -- This is text. -- This is text. -- This is text. -- This is text. -- This is text. -- This is text. -- This is text. --
</p>
</div>
</div>
</body>
</head>
</html>In IE, it doesnt render properly (or rather the way i want)...I'm okay with what FF shows (although in FF also, i want the text to come below div2)
Is there a fix for this? I want the text to come beside div1 ( and below div2 if possible)
TIA
Guru
Posts: 2277
Joined: 2005-12-14
Location: Victoria British Columbia
No doctype, so IE will
Posted: Thu, 2008-05-15 23:18
No doctype, so IE will render in it's 1990's mode. Naturally it will look wrong.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
newbie
Posts: 8
Joined: 2008-04-29
Doesn't matter ...add the
Posted: Fri, 2008-05-16 00:41
Doesn't matter ...add the doctype and test it yourself
Guru
Posts: 2277
Joined: 2005-12-14
Location: Victoria British Columbia
Your answer is beside the
Posted: Fri, 2008-05-16 03:20
Your answer is beside the point.
Valid html requires a doctype and CSS rules are not even designed for invalid html.
Without a proper standards triggering doctype you have no basis for a complaint about how any browser renders your CSS, since the CSS rules don't even apply.
Browsers will still try to follow them but they are in error correction mode and each browser does that differently, and it is allowed to since there is no standard way to correct for errors.
Also, if you don't mind my saying so, it's a matter of professional pride. If you don't care enough to do your html properly why should anyone else care enough about your problem to bother looking in to it?
Of course there are other much smarter people than I around the sytem with less snooty attitudes. Maybe one of them will help you.
But we do ask you up front to supply us with all your code, and that the code you supply be valid and validated. There is a reason for that, and if you think you are above our petty little rules perhaps we'll return the favour by not bothering with you.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
newbie
Posts: 8
Joined: 2008-04-29
Thanks for the
Posted: Fri, 2008-05-16 03:37
Thanks for the reply...although not the kind i was expecting. Its pretty obvious that doctype is required to render correct html pages. Thats why i didn't add this in the code (c'mon its pretty obvious). Should i also put valid links there and images?
I could have gone to "Beginner CSS questions" if i needed a solution that you gave.
Heres the document type declaration for this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Now can someone give me a better solution?
Thanks
Guru
Posts: 2277
Joined: 2005-12-14
Location: Victoria British Columbia
If you really want fast help
Posted: Fri, 2008-05-16 05:30
If you really want fast help you should post a link to the problem page. Various add ons to Firefox make it basically pretty easy to figure out a lot. So even lazy people like me can take a look and make some suggestions. Occasionally I even make a fairly smart observation - not often, but every once in a while.
Otherwise you're asking folks to spend a fair amount of time downloading your code, and reconstructing it locally. Some of us will take the time to do that, but myself I am much too lazy.
But if you want someone to go out of their way to give you some help without any charge, why wouldn't you take the time to make their task as easy as possible? Isn't that in your own self interest?
And on coming to a new forum why wouldn't you take the time to look around first and find out what we ask for? Surely it's to your advantage to take a little time to find that out? It isn't as if you have to look very far.
We do ask for all your code in the sticky messages that stay on the top of the forum index list. We do that for a reason, one founded on long experience helping folks out with problems.
So many problems are solved by the simple addition of a proper doctype and then validating the HTML as well as the CSS that we generally ask for that to be done first to weed out the easy ones.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
newbie
Posts: 8
Joined: 2008-04-29
*sigh* Alright, my sincere
Posted: Fri, 2008-05-16 07:38
*sigh* Alright, my sincere apologies Ed! I was in a bit of a hurry and so added only that code what i thought was relevant to the problem. I do realize now its important to give users the complete code to make it easier to identify problems. So i'll make better/descriptive posts in the future.
So then! here's the original html-css problem code again with a new zazzier look (for those lazy eyes). Hope i've adhered to required standards:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
<!--
.div_main
{
width: 860px;
height: 330px;
border: #cccccc 1px solid;
background: #ffffff;
}
.div1
{
float:left;
margin:5px;
border: #cccccc 1px solid;
background: #666666;
width: 250px;
height: 320px;
}
.div2
{
float:left; margin:5px 5px 5px 2px;
border: #cccccc 1px solid;
background: #333333;
}
.div3
{
float:none;
clear:right;
margin-top:80px;
width:800px;
background: #cccccc;
}-->
</style>
<body>
<div class="div_main">
<div class="div1">
<p><strong> div1 </strong></p>
</div>
<div class="div2">
<h2>Heading - div2</h2>
</div>
<div class="div3">
<p><strong>div3</strong> ........This is text. -- This is text. -- This is text. -- This is text. -- This is text. -- This is text. -- This is text. -- This is text. -- This is text. -- This is text. --
</p>
<p>
More Text. More Text. More Text. More Text. More Text. More Text. More Text. More Text. More Text. More Text. More Text.More Text. More Text. More Text. More Text. More Text. More Text.
</p>
</div>
</div>
</body>
</head>
</html>
See what IE does? div3 has a "margin-top:80px" which FF measures with respect to "div_main" but IE measures it from "div1". I want it to be seen as in FF.
Heres how i started modifying css stepwise:
1) added "position:relative;" to div_main thinking that divs will be placed relative to it. But IE doesn't budge. Removed it.
2) changed width of div3 from 800px to 500px. Looks good on IE but FF squeezes text. *crumple crumple into the dustbin*
3) kept width of div3 at 500px. and added "float:right" to it. Result: divs move right but margin-top:80px is measured differently as before on FF and IE.
4) Tried changing width of div3 from 500 to 600, keeping float:right, but IE overflows text. FF does something unexpected: it moves div3 out of div_main (why?)
5) Add "clear:left" to div3..IE overflow stops but FF as expected clears itself off divs1/2 on the left and moves out of div_main
6) Stuck at "width:500px;float:right;" for div3 (rest of code no change). If only i can make IE come below div2?? Theres definitely something out there that i am forgetting!!
Hope i have been informative enough? Ed, you wanna consider me for a prize?
Moderator
Posts: 5645
Joined: 2004-06-25
Location: Dallas
Remove the width property
Posted: Fri, 2008-05-16 08:18
Remove the width property from div3. It triggers hasLayout, which is roughly equivalent to the spec's block formatting context. See On Having Layout for info.
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
newbie
Posts: 8
Joined: 2008-04-29
I'm not sure its
Posted: Fri, 2008-05-16 13:00
I'm not sure its working....i removed width property from div3 and FF moves div3 out of div_main!! IE keeps div3 on the right of div2. No change.
newbie
Posts: 8
Joined: 2008-04-29
Aah!! Hurrah its done! All
Posted: Fri, 2008-05-16 13:14
Aah!! Hurrah its done! All changes made to div3. Heres what the css for div3 reads now:
.div3{
float:none;
margin-top:80px;
}
Thanks gary and ...um..Ed
Enthusiast
Posts: 273
Joined: 2008-02-22
Location: Providence, RI
I'd just like to note that
Posted: Fri, 2008-05-16 14:18
I'd just like to note that this is an awesome statement...
http://ifohdesigns.com - Web Design That Is Neat.
http://ifohdesigns.com/blog - Read it please.