PDA

View Full Version : Help styling Menu with CSS - &^*&%$ CSS



Morgenmuffel
06-04-2010, 04:32 PM
Ok

http://nigel.geek.nz/ihatecss2.htm

the image at top is what the person wants, and yes the gaps under the middle dividers are intentional, Unfortunately i just can't get it to work, it looks like such a simple thing to do, but it has beaten me,
I cannot get it to work cross browser,
and for the life of me i can't get the links to "Fill" out the menu, and the menu width of course stretches with the page.

Any help would be appreciated as I have spent since 8am on this and i just can't seem to hit it.

Any help is appreciated, but it does need to work in IE6, IE7, IE8 FF etc

pcuser42
06-04-2010, 05:56 PM
Any help is appreciated, but it does need to work in IE6, IE7, IE8 FF etc

Pick three. :rolleyes:

Renmoo
06-04-2010, 06:11 PM
Do you want equal width for the links?

Morgenmuffel
06-04-2010, 06:47 PM
Do you want equal width for the links?
Not particularly as some of the links are longer and when the site is at it's minimum width it is a bit tight, and if all the divisions where the same width, then some would splill to two lines which I don't want

the reason the spans are all set at an equal width is I just got to that point where you throw everything at it and hope something works

Thanks for looking at

Morgenmuffel
06-04-2010, 06:52 PM
Pick three. :rolleyes:
I can't get any 3 of those to display the same let alone all browsers

Renmoo
07-04-2010, 01:35 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>Test</title>
</head>

<body>
<div style="width: 100%; height: 20px; margin: 0 auto; border: 1px solid blue;"><!-- Wrapper -->
<div style="width: 19%; float: left; border-right: 1px solid purple;"><a href="link.htm">Link</div>
<div style="width: 9%; float: left; border-right: 1px solid purple;"><a href="link.htm">Link</div>
<div style="width: 29%; float: left; border-right: 1px solid purple;"><a href="link.htm">Link</div>
<div style="width: 34%; float: left; border-right: 1px solid purple;"><a href="link.htm">Link</div>
<div style="width: 4%; float: left; border-right: 1px solid purple;"><a href="link.htm">Link</div>
</div>
</body>
</html>

Hopefully this will provide some sort of inspiration.

You can try reverse-engineer from the existing templates in the OSWD database. Good luck :)

Morgenmuffel
07-04-2010, 11:25 AM
Thanks Jamuz, that set me on the right track, I only had to do a couple of very minor changes to get the gap working in IE.

Much appreciated