Spacing issue on list item rollovers (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

slappyJmarsden -> 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



jaybee -> RE: Spacing issue on list item rollovers (9/29/2005 5:05:27)

I can't see a problem, looks the same in FF and IE. SO if there is a 1px jog don't worry about it, nobody will ever notice and your average user is not going to be pulling up both browsers and examining them with a magnifier.

Older browsers should render it OK except maybe Netscape 4 which doesn't render anything OK so don't worry about it.

If you have any concern at all, check out how it looks with the style sheets turned off completely.



jaybee -> RE: Spacing issue on list item rollovers (9/29/2005 5:05:52)

Oh and very nice layout by the way. Great job!



Tailslide -> 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.



jaybee -> RE: Spacing issue on list item rollovers (9/29/2005 6:47:37)

I couldn't see any difference. Am I going nuts?



Tailslide -> RE: Spacing issue on list item rollovers (9/29/2005 7:00:27)

quote:

ORIGINAL: jaybee

I couldn't see any difference. Am I going nuts?


Going....? [:D]

The navigation bar itself is about 1px wider left and right than the main content box in FF - don't look at the buttons - look at the background bar. Without the borders it fits in FF - but obviously the borders are required.



slappyJmarsden -> 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.



Tailslide -> RE: Spacing issue on list item rollovers (9/29/2005 11:45:18)

All ok now SlappyJ?



slappyJmarsden -> 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




Tailslide -> RE: Spacing issue on list item rollovers (9/29/2005 11:53:11)

Did you try the fix I posted above and see the test link - it's fine in those.



jaybee -> RE: Spacing issue on list item rollovers (9/29/2005 12:31:55)

Ahhh, that's why I didn't see it, I was looking at the buttons. [sm=rotfl.gif] 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.



slappyJmarsden -> 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 -> 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.



slappyJmarsden -> 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.



jaybee -> RE: Spacing issue on list item rollovers (9/29/2005 14:46:12)

Then don't resize it any smaller than 800 x 600. To be honest, these days there are few people with anything smaller and those that have will be well used to pages breaking. Most sites are designed for 1024x768 and not resizeable.

Your images will stack when the area they're held in becomes too small to contain them. The only way round it is to specify the image sizes as %ages rather than px. This sometimes works but depends on the image resolution and can make them look really fuzzy.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375