|
|
Need help fixing a gap on XHTML site.
|
|
|
|
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
You have a bigger issue with Windows Firefox, the navigation buttons are on top of each other.
:/
|
|
|
|
|
|
|
|
|
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Oct 2000
Location: Oakland, CA
Status:
Offline
|
|
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...
|
|
|
|
|
|
|
|
|
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Oct 2000
Location: Oakland, CA
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Junior Member
Join Date: Jun 2004
Location: Sherwood Park, Alberta, Canada
Status:
Offline
|
|
|
-quadraphonic
12" Rev C Powerbook G4, ComboDrive, 60GB HD, 256MB RAM
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|