Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › HTML/CSS Layout Issues -- Help Needed!
New Posts  All Forums:Forum Nav:

HTML/CSS Layout Issues -- Help Needed!

post #1 of 13
Thread Starter 
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).
In Firefox, everything displays as I would expect, but in IE, I get a phantom left-right scroll bar.
That's the basics of my problem...

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.

Now then, one -- just one -- of the pages always loads in IE with an unnecessary scroll-bar just above the nav. frame. However, 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 without 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!


So, since I'm guessing it's a CSS/HTML layout design issue, here's the code I'm using for the layout:
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>
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):
Code:
<p align="right" style="margin-right: 1in"><a href="#top">Return to the top of the page.</a></p>

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) only in IE?
And also, so long as I've posted my CSS... any tips on better usage/formatting? I ask only because the W3's CSS Validator keeps telling me I have a parse error (but I can't figure out why and/or how to fix it!!)...
post #2 of 13
Thread Starter 
:cough: bump :cough:

Can anyone offer any help here? Or is this too tricky (or not specific enough) and I should just give up?
post #3 of 13
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.
Main Rig
(15 items)
 
  
Reply
Main Rig
(15 items)
 
  
Reply
post #4 of 13
Thread Starter 
How / where would I implement the overflow:hidden? I'm guessing it goes into the CSS 'body' section?
post #5 of 13
Quote:
Originally Posted by [)r@ke
How / where would I implement the overflow:hidden? I'm guessing it goes into the CSS 'body' section?
It would go in whatever the parent object is. In this case it would be a frame tag.
Main Rig
(15 items)
 
  
Reply
Main Rig
(15 items)
 
  
Reply
post #6 of 13
A link to the page with the problem would be really helpful...

Try replacing the body{} element with the following:

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;
}
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
Bob
(13 items)
 
  
CPUMotherboardGraphicsRAM
AMD Athlon 64 3800+ ASUS A8N- SLI Premium XFX GeForce 7800GT Extreme Edition 2GB (2X1GB) Corsair XMS Pro LED TwinX DDR400 
Hard DriveOptical DriveOSMonitor
2x200GB Barracuda SATA RAID0 + 250Gb ATA SONY CDR-RW Ultra speed Windows Vista Home Premium x64 Hanns G 19" widescreen HW191D 
PowerCaseMouse
Antec TruePower 550W Thermaltake Armour Logitech LX5 
  hide details  
Reply
Bob
(13 items)
 
  
CPUMotherboardGraphicsRAM
AMD Athlon 64 3800+ ASUS A8N- SLI Premium XFX GeForce 7800GT Extreme Edition 2GB (2X1GB) Corsair XMS Pro LED TwinX DDR400 
Hard DriveOptical DriveOSMonitor
2x200GB Barracuda SATA RAID0 + 250Gb ATA SONY CDR-RW Ultra speed Windows Vista Home Premium x64 Hanns G 19" widescreen HW191D 
PowerCaseMouse
Antec TruePower 550W Thermaltake Armour Logitech LX5 
  hide details  
Reply
post #7 of 13
Thread Starter 
IE didn't recognize that html>body CSS coding.... :swearing: ... Stupid IE.

No matter what approach I take to the problem, IE always implements a scrollbar into the frame. ARGH! What's worse is that I know all of the code is w3.org validated (as HTML4.01 Transitional/Frameset), but still I can't figureout the IE layout problem.


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...)
post #8 of 13
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
Bob
(13 items)
 
  
CPUMotherboardGraphicsRAM
AMD Athlon 64 3800+ ASUS A8N- SLI Premium XFX GeForce 7800GT Extreme Edition 2GB (2X1GB) Corsair XMS Pro LED TwinX DDR400 
Hard DriveOptical DriveOSMonitor
2x200GB Barracuda SATA RAID0 + 250Gb ATA SONY CDR-RW Ultra speed Windows Vista Home Premium x64 Hanns G 19" widescreen HW191D 
PowerCaseMouse
Antec TruePower 550W Thermaltake Armour Logitech LX5 
  hide details  
Reply
Bob
(13 items)
 
  
CPUMotherboardGraphicsRAM
AMD Athlon 64 3800+ ASUS A8N- SLI Premium XFX GeForce 7800GT Extreme Edition 2GB (2X1GB) Corsair XMS Pro LED TwinX DDR400 
Hard DriveOptical DriveOSMonitor
2x200GB Barracuda SATA RAID0 + 250Gb ATA SONY CDR-RW Ultra speed Windows Vista Home Premium x64 Hanns G 19" widescreen HW191D 
PowerCaseMouse
Antec TruePower 550W Thermaltake Armour Logitech LX5 
  hide details  
Reply
post #9 of 13
Thread Starter 
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.


Now that that's 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).

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.
post #10 of 13
Quote:
Originally Posted by [)r@ke View Post
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.


Now that that's 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).

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.
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
Main Rig
(15 items)
 
  
Reply
Main Rig
(15 items)
 
  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › HTML/CSS Layout Issues -- Help Needed!