We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Odd CSS; I thought I wasn't that bad...
Topic Started: Jun 16 2005, 07:59 PM (396 Views)
JoeC
Euch! IE tastes horrible!
[ *  *  *  *  * ]
...but I've managed to write CSS that validates, shows correctly in IE, but not in FF.

Relevant CSS:
Code:
 
.topnav {
float: left;
width: 778px;
height: 30px;
border : 1px solid #DDD;
border-width: 1px 0px 1px 0px;
color : #25B;
background-color : #F6F6F6;
position: relative;
top: -50px
}

* html .topnav {
top: -40px;
width: 780px
}

.topnav a:link, .topnav a:visited {
height: 100%;
color: #25B;
font-weight: bold;
display: inline;
width: 130px;
text-align: center;
border-right: 1px solid #DDD
}

.topnav a:hover, .topnav a:active {
background-color: #DDD;
border-bottom: 1px solid #DDD
}


(X)HTML:
Code:
 
<html>
<head>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <title>eShop</title>
</head>
<body>
 <div class="holder">
 <div class="navtrail">QuikNav  <?php breadtrail(); ?></div>
 <div class="logo"><img src="logo.jpg" alt="eShop Logo" /></div>
 <div class="headspecials">Special Offer Box 2</div>
 <div class="headspecials">Special Offer Box 1</div>
 <div class="topnav">
  <a href="home.php">Home</a
  ><a href="computers.php?view=category">Computers</a
  ><a href="books.php?view=category">Books</a>
 </div>
<div class="content">
 <br /><br /><br /><br /><br /><br />A
</div>
 </div>
</body>
</html>


If anyone can find the problem, I'd be very grateful.

Well, no. If you can find the answer I'd be very grateful.

The problem is that in FF, the main nav bar (under the logo),
1) The border doesn't go right down to the bottom of the bar, despite the "height: 100%" property
2) The "width: 130px" property isn't kicking in.

Both of these are faults only in FF, IE shows them fine (so I'm suspicious of whether I'm wrong or FF is wrong).

3) In either, an old problem - is there any way to vertically align the text to the centre of the cell?

Thanks alot for your help.
Offline Profile Quote Post Goto Top
 
gamefreak11
Member Avatar
Arcade Coder
[ *  *  *  *  *  * ]
I'am not great at css, but should this:
Quote:
 
.topnav {
float: left;
width: 778px;
height: 30px;
border : 1px solid #DDD;
border-width: 1px 0px 1px 0px;
color : #25B;
background-color : #F6F6F6;
position: relative;
top: -50px
}


Be:
Quote:
 
.topnav {
float: left;
width: 130px;
height: 100%;
border : 1px solid #DDD;
border-width: 1px 0px 1px 0px;
color : #25B;
background-color : #F6F6F6;
position: relative;
top: -50px
}


Maybe that would work? :huh:

Edit: Nevermind, it didn't. :lol:
Offline Profile Quote Post Goto Top
 
FearKiller
Member Avatar
www.drewscripts.com
[ *  *  *  *  * ]
Add "float: left;" to the link elements.
Offline Profile Quote Post Goto Top
 
JoeC
Euch! IE tastes horrible!
[ *  *  *  *  * ]
Thanks, that's fixed the bunched up nav elements, does anyone know how to vertically align text?
Offline Profile Quote Post Goto Top
 
FearKiller
Member Avatar
www.drewscripts.com
[ *  *  *  *  * ]
You can't vertically align text within a DIV. You can get a similar effect by using line-height, but if your line of text were to wrap then it's not gonna look pretty.
Offline Profile Quote Post Goto Top
 
Dennis
Member Avatar
Member
[ *  *  *  *  *  *  * ]
Or you could cheat and use <div valign="top/middle/bottom">.
Offline Profile Quote Post Goto Top
 
FearKiller
Member Avatar
www.drewscripts.com
[ *  *  *  *  * ]
No you can't because that attribute doesn't work on DIVs. It's a table attribute.
Offline Profile Quote Post Goto Top
 
JoeC
Euch! IE tastes horrible!
[ *  *  *  *  * ]
OK, so if I were to alter the line-height, how would I go about centreing the text vertically?

Would I just make the line-height the same as the height for the div?
Offline Profile Quote Post Goto Top
 
FearKiller
Member Avatar
www.drewscripts.com
[ *  *  *  *  * ]
Making the line height the same size as the DIV should work.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Technology Chat · Next Topic »
Add Reply