Hey guys, I have a site i'm in the middle of designing: <!-- w --><a class="postlink" href="http://www.telconstar.com/freedom">www.telconstar.com/freedom</a><!-- w -->
If you view the site in Mozilla everything looks fine. However, if you view the site in IE you will notice the orange box is moved quite a bit down the page. Why is that? Any ideas? Thanks guys.Note the validator has some CSS heartburn.
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.telconstar.com/freedom/Well">http://jigsaw.w3.org/css-validator/vali ... eedom/Well</a><!-- m --> I had a quick glance into it and I am pretty sure it has something to do with ...
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
...those
Cus if you remove them it will go up, or if you change the width of .rbroundbox to 30em it will move up aswellNote the validator has some CSS heartburn.
Right. However, none of those errors are related IMO. I'm using somebody else's layout which is where most of those errors come in (not the font-family ones but those are trivial). I think they are hacks to get it to work better across browsers but I'm not sure. Just hesitant to change code that I didn't come up with. Anyway, good point about the code. I'll fix some of those errors before the site goes live.
Well I had a quick glance into it and I am pretty sure it has something to do with ...
Wow, good catch. When I changed the width to 31em it rendered correctly. Firefox and IE render the width slightly differently so it was overflowing in IE and that's what happens I guess when it overflows.
So, NEXT question, notice that in IE, the left hand border on the white box (the box surrounding the orange) does NOT have a black line. It has one in IE. Even if I specifically add the "border-left: 2px solid black" it still does not render a black border. What's the deal w/ this? Ideas?
Also note, even when I remove this:
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<h2>Header</h2>
<p>Text here my love.</p>
</div>
<div class="rbbot"><div></div></div>
</div>
The problem still shows up. Thanks guys.Tightn up the code so that there are no blank spacing between the divs... for some reason IE dont like white space
try :-
<div class="rbcontent"><h2>all God's people everywhere</h2>
<p style="text-align:left;">
The college years ar.....</p></div>
Might help.Ok I did that. Didn't help but I noticed something. Whenever the text is a single line long the problem shows up. As soon as my text wraps around to the next line the problem goes away. That seems strange to me. Ideas?Delete position:relative; from #mainThat fixed it Fang! However, it brought up a new problem. Notice in IE that the orange box is not centered inside the white box. I'm probably missing something obvious. Ideas?I had a similar problem with inconsistent rendereing and found that the standard that worked was:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
You might try this - place as first line in html.I tried that but it didn't help. Thanks for the suggestion though.Wrap a div around #left and #main:
<div id="innercontainer">
<div id="left"></div>
<div id="main"></div>
</div>
and change these:
#innercontainer {
position:relative;
}
#left
{
float:left;
width:200px;
text-align:left;
padding-left:33px;
font-family: Trebuchet MS;
}
#main
{ float:left;
width:450px;
margin-top:48px;
padding:0 20px;
background-color:#fff; color:#000; border:2px solid black;
}
.rbroundbox {}Right, I did that. The black border shows up but now the box is in a funky place. What next?Try this version, I might have tweaked something else.I'm not sure what else you changed but your version works fine. I'll use that. Thanks.
If you view the site in Mozilla everything looks fine. However, if you view the site in IE you will notice the orange box is moved quite a bit down the page. Why is that? Any ideas? Thanks guys.Note the validator has some CSS heartburn.
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.telconstar.com/freedom/Well">http://jigsaw.w3.org/css-validator/vali ... eedom/Well</a><!-- m --> I had a quick glance into it and I am pretty sure it has something to do with ...
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
...those
Cus if you remove them it will go up, or if you change the width of .rbroundbox to 30em it will move up aswellNote the validator has some CSS heartburn.
Right. However, none of those errors are related IMO. I'm using somebody else's layout which is where most of those errors come in (not the font-family ones but those are trivial). I think they are hacks to get it to work better across browsers but I'm not sure. Just hesitant to change code that I didn't come up with. Anyway, good point about the code. I'll fix some of those errors before the site goes live.
Well I had a quick glance into it and I am pretty sure it has something to do with ...
Wow, good catch. When I changed the width to 31em it rendered correctly. Firefox and IE render the width slightly differently so it was overflowing in IE and that's what happens I guess when it overflows.
So, NEXT question, notice that in IE, the left hand border on the white box (the box surrounding the orange) does NOT have a black line. It has one in IE. Even if I specifically add the "border-left: 2px solid black" it still does not render a black border. What's the deal w/ this? Ideas?
Also note, even when I remove this:
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<h2>Header</h2>
<p>Text here my love.</p>
</div>
<div class="rbbot"><div></div></div>
</div>
The problem still shows up. Thanks guys.Tightn up the code so that there are no blank spacing between the divs... for some reason IE dont like white space
try :-
<div class="rbcontent"><h2>all God's people everywhere</h2>
<p style="text-align:left;">
The college years ar.....</p></div>
Might help.Ok I did that. Didn't help but I noticed something. Whenever the text is a single line long the problem shows up. As soon as my text wraps around to the next line the problem goes away. That seems strange to me. Ideas?Delete position:relative; from #mainThat fixed it Fang! However, it brought up a new problem. Notice in IE that the orange box is not centered inside the white box. I'm probably missing something obvious. Ideas?I had a similar problem with inconsistent rendereing and found that the standard that worked was:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
You might try this - place as first line in html.I tried that but it didn't help. Thanks for the suggestion though.Wrap a div around #left and #main:
<div id="innercontainer">
<div id="left"></div>
<div id="main"></div>
</div>
and change these:
#innercontainer {
position:relative;
}
#left
{
float:left;
width:200px;
text-align:left;
padding-left:33px;
font-family: Trebuchet MS;
}
#main
{ float:left;
width:450px;
margin-top:48px;
padding:0 20px;
background-color:#fff; color:#000; border:2px solid black;
}
.rbroundbox {}Right, I did that. The black border shows up but now the box is in a funky place. What next?Try this version, I might have tweaked something else.I'm not sure what else you changed but your version works fine. I'll use that. Thanks.