CSS - Pure Css Site: Still Necessary To Have Height="82" And Width="82" In <img ... /> ?

http://stuweb.cms.gre.ac.uk/~as234/full/full.htm

some problems:

in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok!

in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image!

the background colour should be grayish however that DOESNT happen!

(I originally posted this at the end of another of my topics but I don't think it was seen).

I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen.

Example Picture

The site itself.

Any ideas?

Is there by chance a feature of MS Front Page that helps us out by changing height and width attributes to upper case,
which CSS does not recognize? If so, is there a way to disable this feature?
What is the popular alternative (among those in the know) to MS FP? The "normal-html-preview" screen format in FP is great.
Or, can we simply get rid of the height and width calls in "img src=" links?
Thank you for any attention to this.
Ed

Hi,

I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser.

Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important.

I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML

Here is my Html

PHP Code:
<DIV id="nav"> 
              <ul>
                <li id="1"><a href="Home">Home</a></li>
                <li id="2"><a href="About-us">About us</a></li>
                <li id="3"><a href="FlexNews">FlexNews</A></li>
                 <li id="4"><a href="Careers">Careers</A></li>
                <li id="5"><a href="Contact">Contact</A></li>
              </ul>
</div> 





Pretty straight forward, now my css


PHP Code:
#nav
{
    width:1005px;
    vertical-align: middle;
    text-align: left;
} 
#nav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
} 
#nav li
{
    float: left;
    text-align: left;
} 
 
#1 a{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#1 a:hover
{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}

#2 a{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;



} 
#2 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#3 a
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#3 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#4 a
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#4 a:hover
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#5 a
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;

} 
#5 a:hover
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;

} 






Here is an exmple link http://dev.121design.co.uk/flextrade2/

Works fine in IE but not in Firefox, heres hopling someone can help.

Thanks in Advance, tried so many different methods and none seem to work.

Cheers,
Stuart

ok, so it's not exactly image swapping, but i'm trying to get this thing to work in Firefox (works in IE). My xhtml is as follows: Code:

<div class="foot">
	<img src="images/menubase.jpg" alt="see | hear | speak" />
		<a href="#" id="menu_see"> </a>
		<a href="#" id="menu_speak"> </a>
		<a href="#" id="menu_hear"> </a>

And the CSS: Code:

a#menu_see {
	position: absolute;
	left: 50%;
	top: 0px;
	width: 66px;
	height: 44px;
	margin-left: -105px;
	background: url(../images/holderMenuSee.gif) no-repeat fixed right top;
}
a#menu_see:hover {
	background: url(../images/menuSee.jpg) no-repeat fixed right top;
}
a#menu_speak {
	position: absolute;
	left: 50%;
	top: 0px;
	width: 74px;
	height: 44px;
	margin-left: -37px;
	background: url(../images/holderMenuSpeak.gif) no-repeat fixed right top;
}
a#menu_speak:hover {
	background: url(../images/menuSpeak.jpg) no-repeat fixed right top;
}
a#menu_hear {
	position: absolute;
	left: 50%;
	top:0px;
	width:61px;
	height: 44px;
	margin-left: 40px;
	background: url(../images/holderMenuHear.gif) no-repeat fixed right top;
}
a#menu_hear:hover {
	background: url(../images/menuHear.jpg) no-repeat fixed right top;
}

the page is located [ here ]

I'm working on a site layout using CSS. I want the content body and the top menu to expand the width of the browser. For some reason, in Safari, the content body works, but the top menu does not. Any suggestions?

HTML:

<div id="mainmenu">
<div id="mainmenutext">Menu will come here.</div>
<div id="mainmenuspace">&nbsp;</div>
</div>

CSS:

#mainmenu {
height: 27px;
width: auto;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #000000;
background-color: #FDDAE4;
clear:both;
position: absolute;
left: 0px;
top: 150px;
}

#mainmenutext {
margin-left: 4px;
color: #000000;
height: auto;
width: auto;
}

#mainmenuspace {
float: right;
height: auto;
width: auto;
}

www.mrossana.com/siteidea/

www.mrossana.com/siteidea/style.css

Thanks!

I have designed one page. I am getting correct behavior in IE but there is some problem with Mozilla.

Here is the code sample:

<DIV class=ColumnHeader><SPAN class=noSort style="WIDTH: 6%; TEXT-ALIGN: center"><input type=checkbox id=chkSelAllAvail value="" name=chkSelAllAvail></SPAN> <SPAN style="WIDTH: 20%">Year</SPAN> <SPAN style="WIDTH:36%">Type of Report</SPAN> <SPAN style="WIDTH:24%">End Date</SPAN></DIV>

I have attached both screen shots of IE and Mozilla.

Can anyone help me ??

k so I have a weird problem. My site snafu-comics.com basically has a main table with all the content in it and then two images on the left and right side just for added visual effect when browser windows are larger resolution than 955 pixels. But the problem is how it's setup now the left image loads (pushing everything to the right side of the screen since it touches the main middle table on the right) Then the main table loads and it takes a little while to finish loading mostly due to the ads. Then the right image loads and once it loads the whole thing pops to the center of the screen like it should.

What I'm trying to do is just get the center table in the center the whole time. And then when the rest loads it loads. Any ideas?

and again for ease the site is snafu-comics.com Thanks for your help!

Hi guys!

Let's say I have this IN BODY directly:

Code:

<div id="top_section">
...
</div>

<ul id="menu">
...
</ul>

Or should I do it like this:

Code:

<div id="top_section">
...
</div>

<div id="menu">
<ul>
...
</ul>
</div>

UL and DIV are both block elements so I think the first is acceptable (combining block elements whatever their sort is logical or am I completely wrong here??)

Thank you

I have a very simple question:

I have this html code:
Code:

<div id="text">
<p><a>text</a></p>
<p><a class="red">text</a></p>
<p><a>text</a></p>
</div>

And this CSS style:
Code:

.red {  color: red;  }    
#text a{  color: blue;  }

I would like to apply the .red class, but it does not work, because the #text a overrides it. How can I solve that? It is just an example because it is a cause of a problem generated by a CMS, and I can only play with the CSS, not with the HTML side.

According to my best information the width and height of each box is equal to the width and height of the outer margin box.
1. Is that correct?

If so, then:
I would expect that if Box2 and box3 are enclosed in Box1, set to "width: 80%;" and "width: 20%;" respectively, and both set to "float: left;" then they should appear side by side in Box one.
2. Is that correct?

If that is also correct then:
3. Why does that not work for
http//rickduley.webs.com/Sample-Webpage.html (code attached). I have found that I must reduce the width of one of .mainText or .sidebar (standard.css) to have them appear side by side.

Thanks

I'm getting this error when opening my site in firebug (a firefox extension):

Quote:
Error in parsing value for property 'height'. Declaration dropped.


The line it is complaining about:
Code:

<img width="765" height="600" border="0" alt="" src="img/mainbackground.jpg" class="sidelength"/>

My style.css file:
Code:

td {
	text-align: left;
	vertical-align: top;
	font-family:Helvetica;
	font-size:12px;
	color:black;
}

form
{
	margin:0px;
}

.center
	{
	left:2em;
}

.linkside
	{
	position:relative;
	top:-63em;
	left:-21em;
	width:200px;
	height:25px;
	font-family:Helvetica;
	font-size:13px;
	text-decoration:none;
	font-weight:bold;	
	color:white;
	}
 .linkside A:link{color:white}
 .linkside A:visited{color:white}
 .linkside A:active{color:white}

.linktopjoin
	{
	position:relative;
	top:-5em;
	left:-2em;
}

.linktophome
	{
	position:relative;
	top:-61.7em;
	left:-2em;
	font-family:Helvetica;
	font-size:13px;
	text-decoration:none;
	font-weight:bold;	
	color:black;
	z-index:4
	}
 .linktophome A:link{color:black}
 .linktophome A:visited{color:black}
 .linktophome A:active{color:white}

.linktopaboutus
	{
	position:relative;
	top:-63.1em;
	left:6em;
	font-family:Helvetica;
	font-size:13px;
	text-decoration:none;
	font-weight:bold;	
	color:black;
	z-index:4
	}
 .linktopaboutus A:link{color:black}
 .linktopaboutus A:visited{color:black}
 .linktopaboutus A:active{color:white}

.linktopservices
	{
	position:relative;
	top:-64.5em;
	left:14em;
	font-family:Helvetica;
	font-size:13px;
	text-decoration:none;
	font-weight:bold;	
	color:black;
	z-index:4
	}
 .linktopservices A:link{color:black}
 .linktopservices A:visited{color:black}
 .linktopservices A:active{color:white}

.linktopspecials
	{
	position:relative;
	top:-65.8em;
	left:22em;
	font-family:Helvetica;
	font-size:13px;
	text-decoration:none;
	font-weight:bold;	
	color:black;
	z-index:3
	}
 .linktopspecials A:link{color:black}
 .linktopspecials A:visited{color:black}
 .linktopspecials A:active{color:white}

.linktoptowing
	{
	position:relative;
	top:-68em;
	left:30em;
	font-family:Helvetica;
	font-size:13px;
	text-decoration:none;
	font-weight:bold;	
	color:black;
	z-index:3
	}
 .linktoptowing A:link{color:black}
 .linktoptowing A:visited{color:black}
 .linktoptowing A:active{color:white}

.content
	{
	position:relative;
	top:-66em;
	left:8.5em;
	font-family:Helvetica;
	font-size:13px;
	text-decoration:none;
	font-weight:bold;	
	color:black;
	z-index:4
}

.topmenupic
	{
	position:relative;
	top:0em;
	left:7em;
}

BODY { 
	background-image: url(img/background.jpg); 
}

img.sidelength
{
position:relative;
top:9.9em;
left:1.9em;
z-index:0
}

img.middlediv
{
position:relative;
top:-25.8em;
left:-14.7em;
z-index:4
}

img.toplogo
{
position:relative;
top:-34.6em;
left:-12.5em;
z-index:4
}

img.menudiv
{
position:relative;
top:-37.9em;
left:6.5em;
}

img.whitetop
{
position:relative;
top:-46.7em;
left:8.5em;
z-index:0
}

img.hometop
{
position:relative;
top:-40em;
left:2.2em;
z-index:3
}

img.aboutustop
{
position:relative;
top:-40em;
left:1.9em;
z-index:3
}

img.servicestop
{
position:relative;
top:-40em;
left:1.9em;
z-index:3
}

img.specialstop
{
position:relative;
top:-40em;
left:1.9em;
z-index:3
}

img.towingtop
{
position:relative;
top:-40em;
left:1.8em;
z-index:3
}

A:Hover  {
	color : black;
	text-decoration : underline;
}

H1 {
	color: black;
	font-weight: bold;
	font-size : 16px;
}

index.html:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<title>removed</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
<link rel=stylesheet type="text/css" href="style.css">
<style type="text/css">
A { text-decoration:none }
</style>
</head>

<center><img class="sidelength" src="img/mainbackground.jpg" alt="" width="765" height="600" border="0" />

<div style="width:168px; height:42px">
<img class="middlediv" src="img/left1.jpg" alt="" width="100%" height="100%" border="0" /> 
</div>

<div style="width:248px; height:117">
<a href="index.html"><img class="toplogo" src="img/logo.jpg" alt="" width="248" height="117" border="0" /></a>
</div>

<div class="topmenupic">
<div style="width:520px; height:60px">
<a href="index.html"><img class="hometop" src="img/home.jpg" alt="" width="100" height="100%" border="0" /></a>
<a href="about_us.html"><img class="aboutustop" src="img/about_us.jpg" alt="" width="100" height="100%" border="0" /></a>
<a href="services.html"><img class="servicestop" src="img/services.jpg" alt="" width="100" height="100%" border="0" /></a>
<a href="specials.html"><img class="specialstop" src="img/contact_us.jpg" alt="" width="100" height="100%" border="0" /></a>
<a href="towing.html"><img class="towingtop" src="img/contact_us.jpg" alt="" width="100" height="100%" border="0" /></a>
</div>
</div>

<div style="width:600px; height:42px"
<img class="menudiv" src="img/left1bg.jpg" alt="" width="100%" height="42" border="0" /> 
</div>

<div style="width:530px; height:117px">
<img class="whitetop" src="img/white.jpg" alt="" width="100%" height="117" border="0" />
</div>

<div class="linkside">
<img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><br>
&nbsp; <a href="testimonials.html">Leave Feedback</a><br>
<img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><br>
&nbsp; <a href="hours_map_payment.html">Hours, Map &</a><br>
&nbsp; <a href="hours_map_payment.html">Payment Options</a><br>
<img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><br>
&nbsp; <a href="friends_family.html">Friends & Family</a><br>
&nbsp; <a href="friends_family.html">Referral Program</a><br>
<img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><br>
&nbsp; <a href="for_sale.html">Cars For Sale</a><br>
<img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><br>
&nbsp; <a href="q_a.html">Q & A</a><br>
<img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><br>
&nbsp; <a href="whats_new.html">What's New?</a><br>
<img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><br>
&nbsp; <a href="links.html">Links</a><br>
<img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><br>
&nbsp; <a href="site_map.html">Site Map</a><br>
<img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><br>
</div>

<div class="linktopjoin">
<div style="width:60px; height:10px">
<DIV CLASS="linktophome">
<a href="index.html" class="menu">Home</a>
</DIV>
<DIV CLASS="linktopaboutus">
<a href="about_us.html" class="menu">About Us</a>
</DIV>
<DIV CLASS="linktopservices">
<a href="services.html" class="menu">Services</a>
</DIV>
<DIV CLASS="linktopspecials">
<a href="specials.html" class="menu">Specials</a>
</DIV>
<DIV CLASS="linktoptowing">
<a href="towing.html" class="menu">Towing Service</a>
</DIV>
</div>
</div>

<div style="width:600px; height:100%">
<DIV CLASS="content">
<p align="justify"><font size="4"><i><b>Welcome...</b></i></font></p>
<hr width="100%">

<img src="img/front.jpg" alt="">

<p align="center"><font size="4" color="black"><i>"removed"</i></font></p>
<hr width="100%">
</DIV>
</div>
</center>
</html>

So theres the code i'm not sure how exactly I should approach fixing that height error. I was thinking maybe I could put it inside a div somehow and make the height 100% but I can't figure out how exactly to do that. I had this site done with tables but decided to redo it with CSS so I could pass the W3C validator. Well I pass the test but now my page doesn't render properly...any advice would be appreciated.

Another strange thing is that this only seems to render properly in firefox...even though this code passes the W3C standards.

*EDIT
Ok I fixed that error all I had to do was specify the values with px. But now I have another problem. Apparently my page only works in firefox (not even opera) any ideas how to fix this? As I said before the page meets W3C standards so i'm surprised it doesn't render properly in opera (or anything other than firefox)

okay this code works fine in ie 6 and ie 7. I'm having trouble in FireFox 2.0.0.8 and FireFox 3.0.1

Code:

<html>
<head> 
<title>Navigation Bar</title>
<style type="text/css">

#main {
width: 800px;
background-color: white;
}

#head {
height: 160px;
width: 800px;
}

a , a:visited {
width: absolute;
background-color: #484848;
color: #0c0c0c;
margin: 0 auto;
padding: 0 auto;
min-width: 160px;
width: 160px;
max-width: 160px;
height: 40px;
border: #0c0c0c dashed 1px;
text-decoration: none;
text-align: center;
}

a:hover {
background-color: #0c0c0c;
color: #ffff00;
margin: 0 auto;
min-width: 160px;
width: 160px;
max-width: 160px;
height: 40px;
border: #ffff00 dashed 1px;
text-decoration: none;
text-align: center;
}

a#link {
width: 160px;
}

</style>
</head>
<body bgcolor="000000">
<table colspan="1" cellpadding="0" cellspacing="0" id="main">
<td id="head"></td><tr>
<td><a id="link" href="#">PAGE1</a><a id="link" href="#">PAGE2</a><a id="link" href="#">PAGE3</a><a id="link" href="#">PAGE4</a><a id="link" href="#">PAGE5</a></td>
</table>
</body>
</html>

basically the links should each be 160 pixels wide and they aren't. I'm a little to css and I but I have been doing html for over 4 years, so I'm afraid I'm going to have to use tables to get the effect I want. If anyone can't shed a little light on my problem I would really appreciate it.