CSS - Can Div "inherit" An "auto" Height

(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?

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

I'm wondering what's the alternative to the "MARGIN: 0px auto;" where I need the -1px for the margin-left and margin-right as oppose to auto for margin-left and margin-right??

Code:

  MARGIN: 0px auto;

Thanks,
FletchSOD

Is there a method or property which will tell me if the above div has visable scrollbars?

I need to resize some elements based on whether the scroll bars are visable or not. I don't want to have them visable all the time, only if needed.

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 am trying to create a wrapper layer that expands to fit the content of a layer within it. the wrapper layer is relatively positioned because it will be centered.

I cant figure out what I am doing wrong.

Please help.

CSS:
#wrapper {
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
position: relative;
width: 760px;
background-color: #FFFFFF;
left: auto;
right: auto;
height: 200px;
z-index: 1;
}

HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>centered</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="external.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="Layer2" style="position:absolute; left:48px; top:22px; width:142px; height:61px; z-index:2; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000;"></div>
<div id="Layer3" style="position:absolute; left:374px; top:95px; width:150px; height:55px; z-index:2; background-color: #9999FF; layer-background-color: #9999FF; border: 1px none #000000;">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
</div>
</body>
</html>

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

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)

I am using the following code. In firefox the input box (including the border) fits a nice box of 83 by 15. In IE it seems to not be so well, and is bothering things near it.

Any ideas on how to rectify this?

Code:

<td><input type="text" class="loginbox" size="13" /></td>

.loginbox
{
border: 1px;
border-style: solid;
border-color: #9AA8C3;
padding: 0;
margin: 0;
text-decoration: none;
font-size: 11px;
color: #40668C;
}

Hello,

I am currently making a site, and this is my first experience using css, and so far I love it. Now I have a page with multiple links on it, and this page has its css info stored in a seperate css file. Now I want some of the links to show up in all satus's (hover, visited ect)with one color, size ect, and some links to show up with a different color. I know i can modify all the links on the page color by adding this to the css page...
------------------------
A:LINK {font-family: Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
font-size:12pt;
font-weight:bold;}
-----------------------

but how can i make it so each class has a differnt a:link, a:visited, ect. Thanks!

http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.).

The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly.

I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too.

The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this.

Thanks.

Hello! Im Using Joomla to build my website. Im using a module and im changing the css styling. There only one problem im having. The tabs on the module align to the left and because i dnt have enough tabs to fill out the space it leave a blank space on the right.

I just want to know how to edit the CSS to make the taps justify / spread out evenly. The makers of the module say any question on customization will be ignored that why i post this question here to see if i could get some help. Its "Tabs Manager GK3" from Gavick

Heres the CSS. Can any1 just make the changes for me please and post it below Thanks in advance!

Code:

.clearfix-tabs{
clear: both;
}

.gk_tab_item_space{
padding: 10px;
}

div.gk_tab-style3 {
position: relative;
}

div.gk_tab_wrap-style3 {
margin: 0 auto;background: #171717;
border: 4px solid #822864;
}

div.gk_tabmenu-style3 {
overflow:hidden;
}

ul.gk_tab_ul-style3 {
list-style-type: none;
margin: -1px 0 0;
padding: 0;
}

ul.gk_tab_ul-style3 li {
background: none;
padding: 0;
float: left;
cursor: pointer;
margin: 0;
position: relative;
}

ul.gk_tab_ul-style3 li span {
background: url('../../images/horizontal/style3/bg_tab.png') repeat-x 0 0;
display: block;
height: 28px;
line-height: 27px;
padding: 0 10px;
font-size: 10px;
color: #000;
text-transform:uppercase;
border: 1px solid #e1e1e1;
border-left: none;
}

ul.gk_tab_ul-style3 li.active span {
background: url('../../images/horizontal/style3/bg_tab-active.png') repeat-x 0 0;
color: #171717;
border: 1px solid #b32784;
}

div.gk_tab_container0-style3 {
clear: both;
}

div.gk_tab_container1-style3 {
overflow: hidden;
}

div.gk_tab_item-style3 {
float: left;
overflow: hidden;
padding: 10px;
}

div.gk_tab_button_next-style3,
div.gk_tab_button_prev-style3 {
width: 24px;
height: 24px;
background: url('../../images/horizontal/style3/b_next.png') no-repeat 0 0;
cursor: pointer;
position: absolute;
top: 43%;
right: 0;
}

div.gk_tab_button_prev-style3 {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 0 0;
left: 0;
right:inherit;
}

div.gk_tab_button_next-style3:hover {
background: url('../../images/horizontal/style3/b_next.png') no-repeat 100% 0;
}

div.gk_tab_button_prev-style3:hover {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 100% 0;
}

.gk_tab_container0-style3,
.gk_tab_container1-style3,
.gk_tab_container2-style3{
position:relative;

}