Sun, 2006-05-28 16:06
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]
Sun, 2006-05-28 16:28
#1
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
Sun, 2006-05-28 17:36
#2
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!
Sun, 2006-05-28 17:44
#3
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">
Sun, 2006-05-28 17:53
#4
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!
Sun, 2006-05-28 18:28
#5
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?
Sun, 2006-05-28 18:46
#6
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.
Sun, 2006-05-28 19:38
#7
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?
Mon, 2006-05-29 01:00
#8
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
Mon, 2006-05-29 21:45
#9
Thank You Guys!
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!!!!
Mon, 2006-05-29 22:22
#10
Re: Thank You Guys!
adrian777 wrote:
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:
LIFO: Absolutely.
<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!!!!
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
Tue, 2006-05-30 10:25
#11
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!
Tue, 2006-05-30 16:42
#12
OK in IE6, but longer in Firefox - Please Help
Lose the accesskeys, they're a hindrance more than a help.
Tue, 2006-05-30 17:42
#13
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.
Wed, 2006-05-31 07:36
#14
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.
Wed, 2006-05-31 08:01
#15
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.
Fri, 2006-06-02 15:29
#16
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.
Fri, 2006-06-02 17:23
#17
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.
Sat, 2006-06-03 07:09
#18
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
Sat, 2006-06-03 12:12
#19
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.
Sat, 2006-06-03 15:21
#20
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>
Sun, 2006-06-04 14:21
#21
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