|
| |
|
|
slappyJmarsden
Posts: 45
Joined: 3/13/2003
Status: offline
 |
Spacing issue on list item rollovers - 9/29/2005 0:31:51
Hello,
I seem to be having a little trouble. I am relatively new to css but learning more and more everyday. There is some odd spacing issues going on with the navigation rollovers in Netscape and Firefox. In IE6 it's fine. If you notice in Netscape and Firefox to the left and right of the rollovers there is a spacing issue which pushes the sides out approx. 1px.
Plus how would I go about aligning the rollovers to the left? I used float-left but this also gives me some strange behaviours in Netscape and Firefox.
Here is the link
http://www.kleenkuip.com/ccc/index.htm
Also I was wondering if these rollovers work in older browsers. I have a feeling that I may have to resort to static buttons or javascript rollovers.
Thanks for your help,
slappy
|
|
|
|
Tailslide
Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Spacing issue on list item rollovers - 9/29/2005 6:01:55
It's probably to do with the way IE (wrongly) interprets the box model. Easiest way to get round it with the layout you're using is to change your #navlist so it looks like this:
#navlist
{
text-align:left;
width: 726px;
margin-top: 0px;
margin-bottom: 0px;
padding: 3px 0;
margin-left: 0;
border-bottom: 6px solid #4a433a;
font: bold 12px Verdana, sans-serif;
background-color: #4a433a;
border-left: 1px solid #1d1b17;
border-right: 1px solid #1d1b17;
}
/*Win IE browsers - hide from Mac IE\*/
* html #navlist {width: 728px;}
/*End hide*/
This feeds IE the wider width for the navlist and FF/Moz etc get the narrower version - works for both then. Here's a test version minus some of the images: Test Page
I've aligned the rollovers to the left of the box - was that what you wanted? If not just take out the text-align:left bit.
< Message edited by Tailslide -- 9/29/2005 7:10:25 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
slappyJmarsden
Posts: 45
Joined: 3/13/2003
Status: offline
|
RE: Spacing issue on list item rollovers - 9/29/2005 11:32:12
For those of you that couldn't spot the problem my site is having in Netscape and Firefox check out the link.
http://www.kleenkuip.com/ccc/glitch.htm
It's one of those teeny tiny design issues that makes me pull my hair out.
| |
|
|
|
slappyJmarsden
Posts: 45
Joined: 3/13/2003
Status: offline
|
RE: Spacing issue on list item rollovers - 9/29/2005 11:52:03
quote:
ORIGINAL: Tailslide
All ok now SlappyJ?
I still have that annoying 1px problem on either side of my buttons. Any solution???
Check the link again...
http://www.kleenkuip.com/ccc/glitch.htm
| |
|
|
|
slappyJmarsden
Posts: 45
Joined: 3/13/2003
Status: offline
|
RE: Spacing issue on list item rollovers - 9/29/2005 13:11:22
quote:
ORIGINAL: Tailslide
Did you try the fix I posted above and see the test link - it's fine in those.
What did you do other than add text-align: left; because I am still experiencing the same problem. I would actually prefer to have the navigation centered but that still doens't fix the 1px problem.
| |
|
|
|
Tailslide
Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Spacing issue on list item rollovers - 9/29/2005 13:18:42
I thought you'd wanted the nav left aligned? quote:
Plus how would I go about aligning the rollovers to the left? No problem just remove the text-align:left and they're centered.
I posted the whole thing that you need to use:
#navlist
{
width: 726px;
margin-top: 0px;
margin-bottom: 0px;
padding: 3px 0;
margin-left: 0;
border-bottom: 6px solid #4a433a;
font: bold 12px Verdana, sans-serif;
background-color: #4a433a;
border-left: 1px solid #1d1b17;
border-right: 1px solid #1d1b17;
}
/*Win IE browsers - hide from Mac IE\*/
* html #navlist {width: 728px;}
/*End hide*/
The bit at the end there will feed IE the different width - just copy the code and paste it in over your current #navlist in the CSS. Did you check out the Test Page? You can see how it works there.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
slappyJmarsden
Posts: 45
Joined: 3/13/2003
Status: offline
|
RE: Spacing issue on list item rollovers - 9/29/2005 13:28:07
Super!...thanks!
Now another small thing...If you resize the browser any smaller than 800*600 my three images in the middle stack on top of each other. I am aware of the NOWRAP option but I think that only applies to images in tables. Those images are NOT in tables.
< Message edited by slappyJmarsden -- 9/29/2005 13:40:32 >
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
Sorry. Just beaten a deadline by 2 days and now off for a very long weekend of pure nothingness. Put it down to my brain being in overload.
