21 replies [Last post]
adrian777
Offline
newbie
United Kingdom
Last seen: 16 years 6 weeks ago
United Kingdom
Joined: 2006-05-28
Posts: 10
Points: 0

Sad I have a problem with my css. I have now been working on this for 6 hours and am losing the will to live!!!

My problem is the menu I have is supposed to be 125px wide. And indeed it is with IE6. However when in mozila firefox it is wider.

I simply want the same widths in IE6 and firefox. I have even placed it in a table which is 125px wide!

There is a demonstration of the problem at the following URL:

[url]http://special.waverider.co.uk/test/testmenu.html [/url]

I am only a keen amateur web designer and the website it is for, is a charity website for people with special needs.

Any assistance with this issue would be gratefully appreciated.[url][/url]

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

OK in IE6, but longer in Firefox - Please Help

You are using Quirks mode.
Add a full Doctype and reduce the width once done.

change color: #white; to color:white; in your css

adrian777
Offline
newbie
United Kingdom
Last seen: 16 years 6 weeks ago
United Kingdom
Joined: 2006-05-28
Posts: 10
Points: 0

Doc Type?

Hi There

Thank you for your reply. I have changed the colour to:

color:white

Success for this bit, thank you!

I did the pages in Dreamweaver MX2004. It automatically places a doctype in the page header. I have since done some reading on this but am still not sure what I should put. Could you please advise?

Much appreciated!

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

OK in IE6, but longer in Firefox - Please Help

You can have a look at the FAQ, choose there :
http://www.w3.org/QA/2002/04/valid-dtd-list.html
or try

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

adrian777
Offline
newbie
United Kingdom
Last seen: 16 years 6 weeks ago
United Kingdom
Joined: 2006-05-28
Posts: 10
Points: 0

Thanks...But!

Hi There

Thank you for this I do appreciate it, however both IE6 and Firefox now display the same. But they both display too wide. I can not seem to get it to 125px wide.

My CSS:

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: left;
}

#navcontainer li { margin: 0 0 1px 0; }

#navcontainer a
{
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid #333;
width: 125px;
background-color: #999;
background-image: url(images/l1_down.gif);
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
border: 1px solid #333;
background-color: #F60;
background-image: url(images/ady_over.gif);
color:white;
}

#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(images/ady_over.gif);
color: #333;
}

Mnay thanks!

adrian777
Offline
newbie
United Kingdom
Last seen: 16 years 6 weeks ago
United Kingdom
Joined: 2006-05-28
Posts: 10
Points: 0

Success.....Possibly!

Hi There

I am still having trouble getting the width to 125px. However I have tried something that does seem to work, however it just doesn't seem correct.

In the example below I changed:
width: 125px
to
width: 8em


#navcontainer a
{
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid #333;

width: 8em;
background-color: #999;
background-image: url(images/l1_down.gif);
}

Is this OK to use?
Is there a chart somewhere which converts or shows em to px?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 20 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: Success.....Possibly!

adrian777 wrote:
Is there a chart somewhere which converts or shows em to px?

There can't be since there is no such fixed relationship. An em is the width of the capital "M" of whatever font is being used at whatever font-size is being displayed by the element. It may be any number of pixels at all.

This is not under the control of you web page in any way, shape or form.

Most browsers in Windows will display their default font at 16 pixels to an em, but if the font size changes so does the em measurement. Anyone with a little technical proficiency can change this default to suit their preferences. I do that myself.

So there is just no way to know how many pixels will be in the width of the em unit.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

OK in IE6, but longer in Firefox - Please Help

You did not update the link.
You should be able to reduce (about 121px) the width once 125 doesn't appear in your html :

<table width="125" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="125"> 

Is the table necessary?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

OK in IE6, but longer in Firefox - Please Help

You have the width as 125px, but you add 2px and 24px side padding for a total of 151px inside the borders. That is correct. If you want a total width of 125, that's {width: 99px; padding: 2px 2px 2px 24px;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

adrian777
Offline
newbie
United Kingdom
Last seen: 16 years 6 weeks ago
United Kingdom
Joined: 2006-05-28
Posts: 10
Points: 0

Thank You Guys!

Laughing out loud
Thank you to everyone!

This problem is now resolved. It was a combination of the answer from DanA:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

and Gary.

Gary's code did not work unless I had the correct DOCTYPE from DanA.

When I installed the newer DOCTYPE I had to re-script some of my pages, as they did not work as they had with the older DOCTYPE.

I really appreciate this guys.......Thank You.

The result:
http://special.waverider.co.uk/test/testmenu.html

Question
=======
Because of my doctype I am now no longer in "Quirk" mode, does this mean my css menu and pages will fall apart in older browsers?
.
Have I done the right thing!!!!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Re: Thank You Guys!

adrian777 wrote:
Laughing out loud
Thank you to everyone!

This problem is now resolved. It was a combination of the answer from DanA:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

and Gary.

Gary's code did not work unless I had the correct DOCTYPE from DanA.That part of the equation had not been discussed, and I assumed you had the correct DTD by then.

Quote:
<snip>
Question
=======
Because of my doctype I am now no longer in "Quirk" mode, does this mean my css menu and pages will fall apart in older browsers?
.
Have I done the right thing!!!!
LIFO: Absolutely.

FILO: Yes some older browsers may not render as well. Does it matter? Don't bother with Netscape<7 or Opera<6 nor IE<5. In IE5.x, look for breakage. Don't worry about a little warpage. Really bad breaks can be hacked/worked around, but less than a disaster isn't worth your time and effort.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

adrian777
Offline
newbie
United Kingdom
Last seen: 16 years 6 weeks ago
United Kingdom
Joined: 2006-05-28
Posts: 10
Points: 0

Thank You Again

Hi There

I have posted a test page on the net which integrates the new menu.

It would be most appreciated if anyone could test this in IE 5.5 or the newer IE 7. I know it works in Firfox version 1.0.7, so would presume it works for higher Firefox browsers.

http://special.waverider.co.uk/indextest.html

I was looking in google for some type of browser simulator, however could not find anything.

Thanks again!

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

OK in IE6, but longer in Firefox - Please Help

Lose the accesskeys, they're a hindrance more than a help.

Verschwindende wrote:
  • CSS doesn't make pies

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

OK in IE6, but longer in Firefox - Please Help

Looks fine in IE 7.
The menu on the left is not displayed correctly by IE 5.5 or ie 5 (no breakage, they would prefer width:100% for #navlist li a) .
On my system ie 5.x and ie 6 do not display rand_image.pl

Validate html.

adrian777
Offline
newbie
United Kingdom
Last seen: 16 years 6 weeks ago
United Kingdom
Joined: 2006-05-28
Posts: 10
Points: 0

Puzzled

Hi Dan

Thank you for your comments, much appreciated.

I am totally puzzled about rand_image.pl not working. It is the first time i have been aware of this. Is this because I have changed the
DOCTYPE. I am using IE6 and it displays fine. IT doesn't seem like there is much to go wrong with this bit of code.

Can you please look at:
http://special.waverider.co.uk/
This site is using the older DOCTYPE. Does this display OK?

I have also updated the width as you suggested, however not sure I have placed it correctly. I have uploaded the css to:

http://special.waverider.co.uk/indextest.html

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: left;

}

#navcontainer li
{ margin: 0 0 1px 0;
width: 100%; }

/*background colour incase images do not show or is slow to load*/
/*width of container is 125px see below*/
/*23px add 2px add 2px ad 98px equals 125px*/
#navcontainer a
{
display: block;
padding: 2px 2px 6px 23px;
border: 1px solid #333;
width: 98px;
background-color: Red;
background-image: url(images/ady_down.gif);
background-repeat: no-repeat;
}
#navcontainer a:link, #navlist a:visited
{
color: White;
text-decoration: none;
font-weight: bolder;

}
/*background colour incase images do not show or is slow to load*/
#navcontainer a:hover
{
border: 1px solid #333;
background-color: #F60;
background-image: url(images/ady_over_animate.gif);
background-repeat: no-repeat;
color: White;
}
/*background colour incase images do not show or is slow to load*/
#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(images/ady_over.gif);
background-repeat: no-repeat;
color: #333;
}

Also when you say "No Breakage! do you mean they are displaying verticaly, but there is no padding effect between the cells?

Again, many thanks for your help and patience.

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

OK in IE6, but longer in Firefox - Please Help

Quote:
This site is using the older DOCTYPE. Does this display OK?

No it doesn't. But it may be a problem with my system. I don't use IE, I just check.
#navcontainer li
{ margin: 0 0 1px 0;
width: 100%; }

You should remove this, it was #navlist li a and it was just in case you wanted to use conditional comments as there is no padding effect and small gaps, and as Gary said it isn't worth your time and effort.

adrian777
Offline
newbie
United Kingdom
Last seen: 16 years 6 weeks ago
United Kingdom
Joined: 2006-05-28
Posts: 10
Points: 0

OK in IE6, but longer in Firefox - Please Help

Hi There

Thank you for taking a look at the site. However I have made a small change and modified the padding to create a small gap between the cells. Could you please take a look and give me your comments?

Where you said there was “no breakage” there should now be a small gap. I added:

#navlist li
{ padding: 0;
margin: 0 0 1px 0;
}

Thank you for your ongoing help. It is appreciated.

http://special.waverider.co.uk/indextest.html

Also.............
I appreciate that due to my lack of skills in CSS/HTML, that the menu does not display correctly in IE5.5 or lower, however is this really a problem?

How many people use these older browsers?

Again thanks for your help and assistance.

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

OK in IE6, but longer in Firefox - Please Help

According to my stats and depending on the site
ie 5.0 between 0.1% and 1% of visitors (excluding robots)
ie 5.5 between 0.1% and 2% of visitors
two screenshots of the menu for those browsers.

adrian777
Offline
newbie
United Kingdom
Last seen: 16 years 6 weeks ago
United Kingdom
Joined: 2006-05-28
Posts: 10
Points: 0

Thanks

Thanks Dan, for those stats!

Looking at those stats I think I will go with my new menu, even though it does not render correctly in IE5.5 and below. As there are only 1-2% of visitors using these browsers, I suspect that this will reduce even further when IE7 and Vista comes out. It may just temp the people using older computers to upgrade.

On your previous post you mentioned some screen shots of the menus. Is it possible for me to view them?

Many thanks

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

OK in IE6, but longer in Firefox - Please Help

The screenshots appear in my previous post with their filesizes as ie5.0.png and ie5.5.png.

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 7 years 45 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

OK in IE6, but longer in Firefox - Please Help

Just a quick question, why are you putting a div around your ul and styling everything that way when it could be done just the same by styling the ul or an id on the ul.

Also instead of trying to place the text vertical with padding reduce the padding to zero top and bottom and use line-height on the 'ul a' for the desired height. this way you get your height and the text is vertically centered.

Take a look at my code and and only use it when you truly understand everything that I've done, if you don't understand anything just ask and i will gladly explain.

CSS

#nav {
	width:125px;
	margin:0;
	padding:0;
	list-style:none;}

#nav li {
	margin:0 0 1px 0;
	padding:0;
	background:#f60 url(images/ady_over_animate.gif) no-repeat top left;}

#nav li a {
	display:block;
	width:100px;
	padding:0 0 0 23px;
	border:1px solid #000;
	background:#f00 url(images/ady_down.gif) no-repeat top left;
	color:#fff;
	font:bold 11px/22px arial, helvetica, sans-serif;
	text-align:left;
	text-decoration:none;}

#nav li a:hover {
	background:none;
	color:#fff;}

HTML

<ul id="nav">
	<li><a href="../">Home</a></li>
	<li><a href="../new.html">News</a></li>
	<li><a href="../results.html">Results</a></li>
	<li><a href="../events.html">Diary</a></li>
	<li><a href="../fund.html">Funding / Social</a></li>
	<li><a href="../about.html">About Us</a></li>
	<li><a href="../training.html">Training</a></li>
	<li><a href="../photos.html">Gallery / Photos</a></li>
	<li><a href="../links.html">Links</a></li>
	<li><a href="../contact.html">Contact</a></li>
	<li><a href="../download.html">Downloads</a></li>
	<li><a href="../sponsor.html">Sponsorship</a></li>
	<li><a href="../merchandise.html">Merchandise</a></li>
	<li><a href="../access_keys.html">Access Keys</a></li>
	<li><a href="../sitemap.html">Site Map</a></li>
</ul>

adrian777
Offline
newbie
United Kingdom
Last seen: 16 years 6 weeks ago
United Kingdom
Joined: 2006-05-28
Posts: 10
Points: 0

Hi There

Thanks for this Joseph. I really appreciate the time you have spent on this. I shall sit down and study this code.

Many thanks