homepage Welcome to WebmasterWorld Guest from 54.197.19.35
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Tab type links wont move down
Kysmiley




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

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




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

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




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

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




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

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




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

Hmm did not work for IE

Kysmiley




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

can anyone see what im missing
pat

Span




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved