Overclock.net banner

1 - 13 of 13 Posts

·
Registered
Joined
·
270 Posts
Discussion Starter #1
Okay, so I was helping my g/f polish up some webcode and I started noticing a problem with layout between Firefox (v1.5.0.7) and IE (v6).<br />
In Firefox, everything displays as I would expect, but in IE, I get a phantom left-right scroll bar.<br />
That's the basics of my problem...<br />
<br />
To get in depth, she's working on a website for one of her semi-professional campus organizations. The site layout uses frames, with a 'main' window taking up all but the lowest-most 70 pixels of space in the window. That bottom section is just big enough for navigation buttons.<br />
<br />
Now then, one -- just one -- of the pages <i>always</i> loads in IE with an unnecessary scroll-bar just above the nav. frame. <b>However</b>, when loaded separately (without the frame usage), the page loads with no scrollbar. So, I had thought this was due to a layout misfunction of some sort and I went through and did lots of back-and-forth code checking (using Dreamweaver 8 -- which displays the content <u>without</u> said unnecessary left-right scrollbar) and ended up implementing a right-side margin... Yet, the scrollbar (for an at-this-time unknown-to-me reason) remains!<br />
<br />
<br />
So, since I'm guessing it's a CSS/HTML layout design issue, here's the code I'm using for the layout:<br />
<div class="bbcode_code">
<div class="bbcode_code_head">Code:</div>
<pre><code> <style type="text/css">
<!--
td {padding-left:25px; font-size: 14pt}
p.heading_1 {color:#0000FF; font-size: 24pt; font-weight: bold}
p.heading_2 {color:#000000; font-size: 16pt}
p.tab_right {position:relative; left:40px; margin-right:70px}
p.tab_right_2 {position:relative; left:80px; margin-right: 100px}
body{
background-image: url(lsamp_3.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
margin-right: 20px;
}
-->
</style></code></pre>
</div>The only other styling I'm using that's not included in that CSS block would be the following line, used at the bottom of the page (reason evident in the code itself):<br />
<div class="bbcode_code">
<div class="bbcode_code_head">Code:</div>
<pre><code><p align="right" style="margin-right: 1in"><a href="#top">Return to the top of the page.</a></p></code></pre>
</div><br />
SO.... any thoughts as to why I'm getting an unneeded left-to-right scrollbar (from within the page, just above the frame break for the nav. bar) <b><u>only</u></b> in IE?<br />
And also, so long as I've posted my CSS... any tips on better usage/formatting? I ask only because the <a href="http://jigsaw.w3.org/css-validator/" target="_blank">W3's CSS Validator</a> keeps telling me I have a parse error (but I can't figure out why and/or how to fix it!!)...
 

·
Registered
Joined
·
270 Posts
Discussion Starter #2
:cough: bump :cough:<br />
<br />
Can anyone offer any help here? Or is this too tricky (or not specific enough) and I should just give up? <img src="/images/smilies/tongue.gif" border="0" alt="" title="Stick Out Tongue" class="inlineimg" />
 

·
Some call me... Bifford
Joined
·
5,265 Posts
Nothing jumps out at me. I do recall a slight difference in the "box model" between FF and IE. Meaning that how padding and margins are displayed may vary between the browsers. Normally this wouldn't be a huge deal, but with such a small area it may cause a problem. The first thing that I would try to do is adding an "overflow:hidden" property. That should prevent a bar from showing up in IE, and if everything fits fine in FF it will be ignored. You may still need to mess with the margin/padding settings though to get it just right.
 

·
Registered
Joined
·
270 Posts
Discussion Starter #4
How / where would I implement the overflow:hidden? I'm guessing it goes into the CSS 'body' section?
 

·
Some call me... Bifford
Joined
·
5,265 Posts
<div style="margin:20px;margin-top:5px;">
<div class="smallfont" style="margin-bottom:2px;">Quote:</div>
<table border="0" cellpadding="6" cellspacing="0" width="99%"><tr><td class="alt2" style="border:1px inset;">
<div>Originally Posted by <strong>[)[email protected]</strong></div>
<div style="font-style:italic;">How / where would I implement the overflow:hidden? I'm guessing it goes into the CSS 'body' section?</div>
</td>
</tr></table></div>
It would go in whatever the parent object is. In this case it would be a frame tag.
 

·
Registered
Joined
·
1,246 Posts
A link to the page with the problem would be really helpful...<br />
<br />
Try replacing the body{} element with the following:<br />
<br />
<div class="bbcode_code">
<div class="bbcode_code_head">Code:</div>
<pre><code>body{
background-image: url(lsamp_3.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
margin-right: 17px;
}

html>body{
margin-right: 20px;
}</code></pre>
</div>I'm not sure if this will work but I think I will be able to help more if you give me the link to the page in question
 

·
Registered
Joined
·
270 Posts
Discussion Starter #7
IE didn't recognize that html>body CSS coding.... :swearing: ... Stupid IE. <img alt="" class="inlineimg" src="/images/smilies/tongue.gif" style="border:0px solid;" title="Stick Out Tongue"><br><br>
No matter what approach I take to the problem, IE always implements a scrollbar into the frame. ARGH! What's worse is that I <i>know</i> all of the code is w3.org <b>validated</b> (as HTML4.01 Transitional/Frameset), but <span style="text-decoration:underline;">still</span> I can't figureout the IE layout problem. <img alt="" class="inlineimg" src="/images/smilies/sozo.gif" style="border:0px solid;" title="Sozo"><br><br><br>
I think I'm going to just give up, but if anyone wants to actually look at the code as a whole, let me know and I'll give you the link. (I'm hesitant to post it publicly...)
 

·
Registered
Joined
·
1,246 Posts
Well, the whole point of html>body is so that IE doesnt parse that code, its a hack (see the link in my siggy to my tut on it). PM me the link and I'll take a look for you <img src="/images/smilies/wink.gif" border="0" alt="" title="Wink" class="inlineimg" />
 

·
Registered
Joined
·
270 Posts
Discussion Starter #9
Sorry I took so long to respond to your offer to help out, sniperscope..... I spent the weekend double-checking my code and updating from HTML 4.01 to XHTML 1.0. <img src="/images/smilies/tongue.gif" border="0" alt="" title="Stick Out Tongue" class="inlineimg" /><br />
<br />
<br />
Now that <u>that's</u> done, I (sadly) still have a phantom (and unnecessary) scrollbar in IE on this particular page that I keep talking about, AND the link colors don't manifest properly (for me, in IE 6).<br />
<br />
Err, I was going to PM the page URL to you, but got an error stating that only works for PMs to Admins and Mods... so I'm stuck right now.
 

·
Some call me... Bifford
Joined
·
5,265 Posts
<div style="margin:20px; margin-top:5px; ">
<div class="smallfont" style="margin-bottom:2px">Quote:</div>
<table cellpadding="6" cellspacing="0" border="0" width="99%">
<tr>
<td class="alt2" style="border:1px inset">

<div>
Originally Posted by <strong>[)[email protected]</strong>
<a href="showthread.php?s=fb118d83aa0ea05832d812d721028acf&p=1381743#post1381743" rel="nofollow"><img class="inlineimg" src="http://static.overclock.net//img/forum/go_quote.gif" border="0" alt="View Post" /></a>
</div>
<div style="font-style:italic">Sorry I took so long to respond to your offer to help out, sniperscope..... I spent the weekend double-checking my code and updating from HTML 4.01 to XHTML 1.0. <img src="/images/smilies/tongue.gif" border="0" alt="" title="Stick Out Tongue" class="inlineimg" /><br />
<br />
<br />
Now that <u>that's</u> done, I (sadly) still have a phantom (and unnecessary) scrollbar in IE on this particular page that I keep talking about, AND the link colors don't manifest properly (for me, in IE 6).<br />
<br />
Err, I was going to PM the page URL to you, but got an error stating that only works for PMs to Admins and Mods... so I'm stuck right now.</div>

</td>
</tr>
</table>
</div>I can take a look a little later this afternoon. So you may PM me the link. Or, I can forward the link to sniperscope for you. Either way is cool with me
 

·
Registered
Joined
·
1,246 Posts
yer do both so that BFRD n I can both have a butchers...
 

·
Registered
Joined
·
270 Posts
Discussion Starter #12
Hooray! One long week at school down, and now I've finally checked the forums again.<br><br>
PM link sent along to BFRD. Thanks fellas!
 

·
Registered
Joined
·
1,246 Posts
Just took a look at the page in question...<br />
<br />
The code is quite sloppy (no offence <img src="/images/smilies/wink.gif" border="0" alt="" title="Wink" class="inlineimg" />) and I can see the scroll bar at the bottom in IE... I could help you recode it if you want so the code is cleaner and easier for the browsers to parse. I'm still trying to figure out why its doing the bar at the bottom though...<br />
<br />
I'm probs gona have to have a little fiddle with this at some point...<br />
<br />
What I think it is is a <div> element that you have in (the root of your site /border.html) which is assuming a very wide width, which pushes the screen out a litle in IE. I reckon this is because of your many alignment and width and margin declarations and attributes in your CSS and HTML code. I should be able to fix it for you.<br />
<br />
To start off with, replace your<br />
<div class="bbcode_code">
<div class="bbcode_code_head">Code:</div>
<pre><code><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></code></pre>
</div> at the top of your page with this:<br />
<br />
<div class="bbcode_code">
<div class="bbcode_code_head">Code:</div>
<pre><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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></code></pre>
</div>So now we have a valid format and encoding to work with.
 
1 - 13 of 13 Posts
Top