Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > Need help fixing a gap on XHTML site.

Need help fixing a gap on XHTML site.
Thread Tools
quadraphonic
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status: Offline
Reply With Quote
Jan 1, 2006, 06:17 PM
 
I'm sure the solution to my problem is very simple, I'm just not sure what it is. The site in question is here:

www.ridgeathermitage.com/test/

The style sheet is here

www.ridgeathermitage.com/test/css/ridge.css

There is a gap of a few pixels between the side navigation bar and the top decoration for the content window. Any thoughts on how to close the gap?

Thanks in advance for any help you can provide folks!

Will
-quadraphonic
12" Rev C Powerbook G4, ComboDrive, 60GB HD, 256MB RAM
     
skalie
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status: Offline
Reply With Quote
Jan 2, 2006, 06:22 AM
 
You have a bigger issue with Windows Firefox, the navigation buttons are on top of each other.

:/
     
quadraphonic  (op)
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status: Offline
Reply With Quote
Jan 2, 2006, 12:53 PM
 
Great! And the gap issue I have is a different beast in Firefox as well. I can fix up the nav buttons. Is the issue that I floated the nav element? Should I just position it directly?

Edit: Nav fixed and presentation is bang on for Firefox now. IE is still a problem with that gap.
( Last edited by quadraphonic; Jan 2, 2006 at 01:09 PM. )
-quadraphonic
12" Rev C Powerbook G4, ComboDrive, 60GB HD, 256MB RAM
     
exca1ibur
Mac Elite
Join Date: Oct 2000
Location: Oakland, CA
Status: Offline
Reply With Quote
Jan 2, 2006, 07:32 PM
 
Its a float issue. IE handles them different. Try replacing these lines with this...

Code:
/*-- Ridge SubNav --*/ #ridgesubnav { float: left; height: 16px; width: 540px; margin-top: 1px; padding: 0px; background: url(../graphics/topbar.jpg) top left no-repeat; } /*-- Ridge SubNav 2 --*/ #ridgesubnav2 { float: left; height: 16px; width: 540px; margin: 0px; padding: 0px; background: url(../graphics/topbar2.jpg) top left no-repeat; }
Basically...
Float both layers....
Add a width....
0 out the right margins....

Should work in both IE and Firefox now....

P.S. If you are still having probs, let me know and I can send you the working CSS file I have here...
     
quadraphonic  (op)
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status: Offline
Reply With Quote
Jan 2, 2006, 10:11 PM
 
That fixed it for IE, but in Firefox, it's placing the top bar after the main content window now. I've uploaded the updated CSS file so you can see it. Strange things with this stuff. Admittedly, I'm definitely a novice when it comes to using CSS.
-quadraphonic
12" Rev C Powerbook G4, ComboDrive, 60GB HD, 256MB RAM
     
exca1ibur
Mac Elite
Join Date: Oct 2000
Location: Oakland, CA
Status: Offline
Reply With Quote
Jan 3, 2006, 12:42 AM
 
Originally Posted by quadraphonic
That fixed it for IE, but in Firefox, it's placing the top bar after the main content window now. I've uploaded the updated CSS file so you can see it. Strange things with this stuff. Admittedly, I'm definitely a novice when it comes to using CSS.

Whoops. Mix up on my part. Try this I have updated it a bit and killed a div for you. Drop the "ridgenav2" in the HTML and try replacing these tags in the CSS doc.

Code:
#ridgenav { float: left; text-align: left; margin-top: 1px; margin-bottom: 0px; padding: 0px; vertical-align: sub; width: 110px; height: 375px; background: url(../graphics/sidebottom.jpg) #8F571F bottom left no-repeat; } /*-- Ridge SubNav --*/ #ridgesubnav { float: right; left: 110px; height: 16px; width: 540px; margin-top: 1px; padding: 0px; background: url(../graphics/topbar.jpg) top left no-repeat; } /*-- Ridge SubNav 2 --*/ #ridgesubnav2 { float: right; left: 110px; height: 16px; width: 540px; margin: 0px; padding: 0px; background: url(../graphics/topbar2.jpg) top left no-repeat; }

I think that was all I changed there. If this doesnt work I forgot something and I can just post the full code for everythign for you. I DID test it and it work fine in both. I swear.
     
quadraphonic  (op)
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status: Offline
Reply With Quote
Jan 3, 2006, 02:27 AM
 
Beautiful! Many thanks!
-quadraphonic
12" Rev C Powerbook G4, ComboDrive, 60GB HD, 256MB RAM
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 01:48 PM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,