1. Home
  2. Forums Index
  3. Browser Side / CSS 3:20 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Tab type links wont move down

         

Kysmiley

1:51 pm on Feb 14, 2006 (gmt 0)

10+ Year Member



I'm using filing tab type links and they wont move down to sit on top of the content section the sit in the middle of the section instead of at the bottom. On one page they worked great then i changed the header image and change sizes to match and this is where my trouble started and I cant see what it is. here is the code.
CSS
#################################
#container {
margin-left:auto;
margin-right:auto;
width: 760px;
min-height:100%;
text-align: left;
background: white;
border: 1px solid #004000;
position:relative;
}
/* commented backslash hack v2 \*/
* html #container {height:100%;}
* html #container {width:762px;w\idth:760px;}
* html body{font-size:x-small;f\ont-size:small;}
/* end hack */

.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}

#mainheader {
position:absolute;
left:0;top:0;
height: 300px;
width:100%;
background-color: #679153;
border-bottom: 1px solid #004000;
z-index:1;
}
#header {
text-align:center;
height: 260px;
/*width:100%;*/
background-color: #679153;
border-bottom: 1px solid #004000;
position:relative;
z-index:2;
overflow:hidden;
}
#headerleft {
margin;auto;
float:left;
/*text-align:center;*/
height: 260px;
width:550px;
background: #679153 url("../images/lsr-logo.jpg") no-repeat;
position:relative;
z-index:2;
overflow:hidden;
}
#headerright {
text-align:center;
height: 260px;
background-color: #679153;
position:relative;
z-index:2;
overflow:hidden;
}
* html #mainheader {height:301px;he\ight:302px}
* html #header {height:262px;he\ight:262px}
#mainnav {
width:100%;
height: 40px;
margin:0;
background-color: #679153;
border-bottom: 1px solid #004000;
position:relative;
z-index:2;
}

#navlist {
position: relative;
background: url("../images/bg.gif") repeat-x bottom;
font-size:85%;
line-height:normal;
}
#navlist ul {
margin:0;
padding:10px 10px 0;
list-style-type:none;
}
/* sub menu styling */
#navlist ul ul{
display:none;/* hide submenu */
position:absolute;/* remove it from the flow so it can overlap */
left:-10px;
top:1.4em;
width:13em;
}
#navlist ul ul li{float:none;}
#navlist ul ul li a{float:none;}
/* mac hide \*/
* html #navlist ul ul li,
* html #navlist ul ul li a {height:1%}
/* end hide */
#mainnav ul li:hover ul,#mainnav ul li.over ul {/* make sub menu appear */
display: block;
}

#navlist li {
float:left;
background:url("../images/right.gif") no-repeat right top;
margin:0;
padding:0 5px 0 0;
z-index:4;position:relative;
}
#navlist a {
float:left;
display:block;
background:url("../images/left.gif") no-repeat left top;
padding:5px 7px 4px 20px;
text-decoration:none;
font-weight:bold;
color:#9cf;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#navlist a {float:none;}
/* End IE5-Mac hack */
#navlist a:hover {
color:#fff;
}
#navlist #current {
background-image:url("../images/right_on.gif");
}
#navlist #current a {
background-image:url("../images/left_on.gif");
color:#333;
padding-bottom:5px;
}
* html #mainnav{height:42px;he\ight:40px}
##################################
Can anyone see the problem Please.
Pat

Argblat

4:16 pm on Feb 14, 2006 (gmt 0)

10+ Year Member



Pat,

Your best bet for a response is to add the HTML that these styles are affecting...so that people can copy and paste both into a test file where they can see exactly what is going on. CSS goes hand in hand with the HTML it's meant for..giving just the CSS is only giving half the necessary data

-Mike

Kysmiley

10:13 pm on Feb 14, 2006 (gmt 0)

10+ Year Member



here is the html for the top post.
######################
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="./inc/some.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="mainheader">
<!--<div class="blank2"></div>-->
<!-- for decoration only -->
</div>
<div id="header"><div id="headerleft"></div><div id="headerright">
<br>
<img src="./images/r_mls.gif" class="mls" alt="Little Sandy Realty MLS member">
</div>
</div>
<div id="mainnav">
<div id="navlist">
<ul id="nav">
<li id="current"><a href="./">Main</a></li>
<li><a href="">Tools</a>
<ul>
<li><a href="buyers.php">Buyer Tips</a></li>
<li><a href="sellers.php">Seller Tips</a></li>
<li><a href="agents.php">Our Agents</a></li>
<li><a href="links.php">Links</a></li>
<li><a href="contacts.php">Contact Us</a></li>
</ul></li>
<li><a href="">Listings</a>
<ul>
<li><a href="res.php">Residentual</a></li>
<li><a href="../links.php">Farms</a></li>
<li><a href="reviews.php">Acerage</a></li>
<li><a href="reviews.php">Commercial</a></li>
<li><a href="reviews.php">Investments</a></li>
</ul></li>
<li><a href="../events.php">Attractions</a></li>
<li><a href="">Communities</a>
<ul>
<li><a href="bio.php">Elliott Co.</a></li>
<li><a href="contact.php">Isonville</a></li>
<li><a href="../links.php">Sandy Hook</a></li>
<li><a href="reviews.php">Rowen Co.</a></li>
<li><a href="reviews.php">Morgan Co.</a></li>
<li><a href="reviews.php">Carter Co.</a></li>
<li><a href="reviews.php">Laurwence Co.</a></li>
<li><a href="reviews.php">Others</a></li>
</ul></li>

</ul>
<div class="clearer"></div>
</div>
</div>

Span

11:01 pm on Feb 14, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I commented out three lines of the two rules below. Looks fine now in Safari, FF and Opera on Mac. Don't know about Win/IE. 


#mainheader {
position:absolute;
left:0;top:0;
/* height: 300px; */
width:100%;
background-color: #679153;
border-bottom: 1px solid #004000;
z-index:1;
}


#mainnav {
width:100%;
/* height: 40px; */
margin:0;
background-color: #679153;
/* border-bottom: 1px solid #004000; */
position:relative;
z-index:2;
}

Kysmiley

1:46 am on Feb 15, 2006 (gmt 0)

10+ Year Member



Hmm did not work for IE

Kysmiley

2:54 pm on Feb 15, 2006 (gmt 0)

10+ Year Member



can anyone see what im missing
pat

Span

7:14 pm on Feb 16, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hmm did not work for IE

Heh. The star hacks. As I'm not on Windows, they have no effect on the browsers I use.

What if you comment out the next two rules? The first one is in the middle of your css, the second one is at the bottom.

* html #mainheader {height:301px;he\ight:302px}

* html #mainnav {height:42px;he\ight:40px}

Kysmiley

2:55 pm on Feb 18, 2006 (gmt 0)

10+ Year Member



Thank you Span with that and a little other work I finally got this working right after over a week of playing with it
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 3:20 am May 2, 2026