is this a margin issue or something else? [Archive]

demitry7

03-24-2008, 03:09 AM

Hello there,

Straight to the point.. Why does the navigation bar on this page (http://www.getub.com/TESTING.html)have the tabs in different positions and when you hover it, it moves up and down?

Thanks,
-Demitry

jcdevelopment

03-24-2008, 03:18 AM

#menu a:hover{padding-top:0px;}

try that, that fixes the hover, i will look at the code for the active page!

demitry7

03-24-2008, 03:53 AM

wow, cool thanks. Yeah for some reason it's unaligned when not hovered over. Completely impossible to solve for someone new to to this.. like myself.

effpeetee

03-24-2008, 10:34 AM

This works for me.
I've collected the css together.

Changed the html marked in red. Removed class="current"

Frank

<!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>
<base href="http://www.getub.com/TESTING.html">

<style type="text/css">

body {
margin: 0;
padding: 0;
font-size: 0.9em;
line-height: 20px;
font-family: "Myriad Pro", "Trebuchet MS", Arial;
border: 1px solid #000;
background-color: #FFFFFF;
width: auto;
bottom: auto;
}

a {
color: #97070b;
text-decoration: none;
}

p {
padding: 0 10px 5px 10px;
}

h1 {
margin: 0;
padding: 10px 0 0 10px;
text-transform: uppercase;
font-size: 1.5em;
color: #be141d;
font-weight: normal;
}

#header {
background: url(images/header_bckg.jpg) no-repeat top right #B9121C;
}

#logo {
height: 131px;
background-color: #FFFFFF;
background-image: url(../images/head_bckg.jpg);
background-repeat: repeat;
background-attachment: fixed;
background-position: left;
width: auto;
padding-top: 30px;
padding-right: 20px;
padding-bottom: 0;
padding-left: 40px;
}

#slogan {
float: left;
color: #FFFFFF;
font-size: 26px;
text-transform: uppercase;
padding-top: 40px;
}

#logo a{
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 5px;
}

#logo_text {
float: right;
width: 240px;
text-align: left;
font-size: 11px;
color: #fff;
line-height: 12px;
padding-top: 5px;
}

#menu {
background: url(../images/menu_bckg.gif) repeat-x #fff;
height: 40px;
padding-top: 10px;
}

#menu_list {
width: 600px;
margin: 0 auto;
}

#menu a {
display: block;
color: #000000;
float: left;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 20px;
padding-top: 8px;
}

#menu a:hover{
padding-top: 0px;
}

.splitter {
display: block;
float: left;
}

.item img {
background-color: #FFFFFF;
padding: 6px;
border: 1px solid #d0d0d0;
}

.item a {
display: block;
float: left;
font-size: 12px;
color: #bd131d;
}

.description {
display: block;
float: right;
width: 130px;
padding: 0 10px 20px 0;
line-height: 12px;
}

p.additional {
margin: 0 10px;
color: #9c9c9c;
font-size: 11px;
line-height: 12px;
border-top: 1px solid #bdbdbd;
padding: 10px 10px 30px 45px;
background: url(../images/umbrella.gif) no-repeat 0 12px;
}

#text {
margin: 0 305px 0 20px;
}

#text li {
list-style: none;
padding-left: 20px;
background: url(../images/li.gif) no-repeat 0px 4px;
}

#sidebar {
float: right;
width: 245px;
padding: 10px 20px 0 30px;
font-size: 11px;
}

#sidebar a{
font-weight: bold;
}

#sidebar h1 {
margin: 0;
padding: 0 0 20px 0;
text-transform: uppercase;
font-size: 18px;
color: #000;
font-weight: normal;
}

#main {
float: left;
background: url(../images/sidebar_bckg.gif) no-repeat top right #fff;
padding: 20px 0 0 0;
}

#footer {
background: url(../images/footer_bckg.gif) repeat-x #000;
height: 57px;
clear: both;
}

#left_footer {
float: left;
padding: 20px 0 0 30px;
background: url(images/c.gif) no-repeat 30px 35px;
color: #fff;
font-size: 12px;
}

#left_footer a {
color: #fff;
}

#left_footer a:hover {
text-decoration: none;
}

#right_footer {
float: right;
padding: 20px 30px 0 0;
color: #414141;
font-size: 9px;
text-align: right;
}

#right_footer a {
color: #666666;
font-size: 9px;
}

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(media/menub_bg.gif) repeat-x;
height: 46px;
list-style: none;
}

.glossymenu li{
float: left;
}

.glossymenu li a{
float: left;
display: block;
color: #000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding: 0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px;
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(media/menub_hover_left.gif) no-repeat;
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(media/menub_hover_right.gif) no-repeat right top;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Welcome to the UMass Network!</title>
</head>

<body>


<div id="header">
<ul class="glossymenu">
<li><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>

<li><a href="buybooks.html"><b>BUY</b></a></li>

<li><a href="sellbooks.html"><b>Sell</b></a></li>

<li><a href="community.html"><b>Community</b></a></li>
</ul>
</div>

<div id="logo">
<div id="slogan"></div>

<div id="logo_text">
<p><a href="#"></a><br />
<br /></p>
</div>
</div>


<div id="main">
<div id="sidebar">
<h1>WEBSITE CURRENTLY UNDER CONSTRUCTION!!</h1>

<div class="item">
<a href="#"><img src="images/picture.jpg" alt=" " /></a> <a href="#">some
link</a><span class="description">and short description of first screenshot</span>
</div>

<div class="item">
<a href="#"><img src="images/picture.jpg" alt=" " /></a> <a href="#">some
link</a><span class="description">and short description of second screenshot</span>
</div>

<div class="item">
<a href="#"><img src="images/picture.jpg" alt=" " /></a> <a href="#">some
link</a><span class="description">and short description of third screenshot</span>
</div>
</div>

<div id="text">
<h1>Welcome</h1>

<p><strong>COMING SOON</strong></p>

<ul>
<li>Questions? support@umass-books.com</li>
</ul>

<h1> </h1>

<p><strong>MEMBER LOGIN:</strong></p>

<p class="additional">UMass Network</p>
</div>
</div>


<div id="footer">
<div id="left_footer">
© Copyright 2008 <b>Getub.com</b>
</div>

<div id="right_footer">

Design by <a href="http://www.realitysoftware.ca" title="Website Design"><strong>Reality
Software</strong></a>
</div>
</div>
<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script><script type="text/javascript">

var pageTracker = _gat._getTracker("UA-1827699-9");
pageTracker._initData();
pageTracker._trackPageview();

</script>__________________
</body>
</html>

demitry7

03-25-2008, 03:56 AM

wow thanks a lot!!!! that worked as you can see on www.getub.com/TESTING.html

Anothing thing, you can see that as you get closer to the tabs they start acting weird.. moving up and down, any ideas on that?

Also, I was looking to have a look more on the lines of www.campusbooks.com - and as you can see I am far from that. Any ideas where I should start or what I should do effpeetee or anyone?

effpeetee

03-25-2008, 02:06 PM

wow thanks a lot!!!! that worked as you can see on www.getub.com/TESTING.html

Anothing thing, you can see that as you get closer to the tabs they start acting weird.. moving up and down, any ideas on that?

Also, I was looking to have a look more on the lines of www.campusbooks.com - and as you can see I am far from that. Any ideas where I should start or what I should do effpeetee or anyone?
I'm afraid that's a bit beyond me.

Frank

Actinia

03-25-2008, 03:41 PM

I have run into this kind of problem before. The answer is that it is probably a margin or padding issue. What is happening is that your styling for the hover state gives the div a different height from the non-hover state. When you approach the block from below, it moves onto the hover state, which changes its height, which takes it away from the hover state, hence it flickers.

However, I cannot see exactly where in your code this happens. As far as I can see, your hover styling should not affect height. Except that it does!

To solve it, I suggest that you give additional styles to your various classes that add explicit and different borders and background-colours. This might helps show you in which div the problem lies.

J