Forum Moderators: not2easy
I have two vertical navs, and a list all floated left in a container div.(this is inside of a wrapper div, which is also floated to the left. This is a totally float template) The two divs that are designed to have a button effect with css. When I open the page and hover over the navs, they jump so that they are closer to the left of where they should be. I dont' think this is the same as the 3px jump, or is it?
Thanks in advance, and if you can point me to some reading material on this I would be even more appreciative, I prefer reading before having someone solve this for me.
I prefer reading before having someone solve this for me
reading? [webmasterworld.com]
don't know if it's the same but the "button" effect suggests borders
Suzy
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>template 8</title>
<!--[if IE]>
<style type="text/css">
* {word-wrap: break-word;}
</style>
<![endif]-->
<!--Note *Above is put in to keep IE5 from wraping words somehow.
Not exactly sure how this works, yet, but was shown how to do this-->
<style type="text/css">
<!--
html body {
margin: 2px;
padding: 0px;
text-align: center;
font-size: 100%;
font-family: Arial, Verdana, sans-serif;
background-color: #8B0000;
color: #000;
}
div#wrapper {
width: 99%;
float: left;
margin-right: .55%;
margin-left: .55%;
text-align: left;
background-color: #00FFFF;
}
div#columnleft {
width: 73%;
float: left;
line-height: 135%;
margin-left: .55%;
background-color:#00BFFF;
}
div#maincontainer {
width: 98%;
float: left;
background-color: #F5F5DC;
}
div#maincontainer h2 {
margin: 0px;
padding: 0px;
font-size: 100%;
}
div#contenta h2, div#contentb h2, div#contentc h2 {
margin: 0px;
padding: 0px;
text-align: center;
font-size: 115%;
}
div#contenta {
width: 98%;
padding: 1%;
float: left;
margin-left: .55%;
background-color: #FFFAF0;
line-height: 110%;
font-size: 90%;
}
div#contentb {
width: 85%;
padding: 1%;
float: left;
margin-left: .55%;
background-color: #FFFACD;
line-height: 110%;
font-size: 90%;
}
div#contentc {
width: 80%;
float: left;
padding: 1%;
margin-left: .55%;
background-color: #DCDCDC;
line-height: 110%;
font-size: 90%;
}
div#clear {clear: both;}
/*begin side nav*/
div#navside {
float: left;
margin-left: 1.75%;
width: 18%;
}
div#navside a {
width: 7em;
display: block;
padding: 3px;
width: 160px;
background-color: #00008B;
text-decoration: none;
font-weight: bold;
font-size: 105%;
border-bottom: 1px solid #fff;
}
div#navside ul {
margin:0px;
padding: 0px;
list-style-type: none;
font-family: Arial, Verdana, sans-serif;
}
div#navside a:link, div#navside a:visited {
color: #fff;
text-decoration: none;
}
div#navside a:hover {
background-color: #fff;
color: #000;
}
-->
</style>
</head>
<body>
<div id="wrapper"><!--open wrapper div-->
<div id="maincontainer"><!--open main container-->
<div id="columnleft"><!--open left column-->
<div id="contenta"><!--open contentA div-->
<h2>This is your ContentA div</h2>
<p>vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
</div><!--close content A div-->
<div id="contentb"><!--open content B div-->
<h2>This is your ContentB div</h2>
<p>vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div><!--close content B div-->
<div id="contentc"><!--open contentC div-->
<h2>This is your ContentC div</h2>
<p>vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
</div><!--close contentC div-->
</div><!--close column left div-->
<div id="navside"><!--open nav side div-->
<ul>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
</ul>
</div><!--close nav side div-->
</div><!--close main container-->
<!--close wrapper div--></div>
</body>
</html>
CEM statedYeah, yeah. Suck all the fun out of it why don't you.;)
SuzyUK Hmm from reading your link Suzy, it could be that the background color is creating the shift? Doesn't make sense, if you wish to apply a background color, somehow it should work. I prefer to not to have to apply any hacks to anything that I am doing. Straight up styles according to webstandards.
<edit> I would like to mention another IE problem that I am having as well. I'm going to call it a mirroring effect. Not sure what else to call it. On this page I just noticed it as I loaded it up to finish it up, and its on another template, if interesetd in seeing it, sticky me and I'll send you the url to it. What is happening is that in one of the divs, I have text escaping out of the div. It is usally the last 4-5 letters of what I have placed within the div. I have tried clearning the div from the others, etc.. but I'm not having any luck elminiating this little problem. IE Bug? IF so, any information on this and how to solve it?</edit>
[edited by: SuzyUK at 1:50 pm (utc) on Dec. 7, 2004]
[edit reason] code amended - owner reqest [/edit]
It is usally the last 4-5 letters of what I have placed within the div. I have tried clearning the div from the others, etc
This is a documented IE quirk, it's on Johns site, and is called Duplicating Characters Bug
The cause is IE's usual "hasLayout" problems, and is triggered by whitespace between the floats ~ in this case more explicitly the <!-- comments -->.
you can apply a "layout" hack (the Holly Hack is one) to your layout if you can work out which elements are causing it, but the best way to avoid this particular bug is to always make sure your comments are "inside" the divs they are pertaining to.. thus there should not be any "between" neighbouring floats. A good habit to get into in general perhaps to avoid a small bit of IE yukiness!
e.g.
.......
<div><!--open rssfd div-->
<div><!--open container2 div-->
.....fooo.....
<!--close rssfd div--></div>
<!--close container2 div--></div>
Suzy
div#container4 {
width: 66%;
float: left;
margin-left: 10%;
background-color: #fff;
clear: both;
}
div#container4 h2 {
margin:0px;
padding: 0px;
text-align: center;
font-size: 108%;
}
div#rssfeed {
width: 32%;
float: left;
background-color: #FFF0F5;
}
div#contentc {
width: 65%;
float: left;
margin-left: 2.75%;
background-color: #FFF0F5;
btw, thanks for the name of the article, I searched, but just couldn't think of a term to use. I kept thinking mirrored text? lol.
So white space is the problem here? Good thing there is a fix, this is how I do all my divs so that I know which ones open and close. Helps when you have to go back and try to find a problem within something.
wahooooooo! not only did it fix that problem, but it let a few of the divs that didn't do exactly what I wished for them to do behave! *note to self, use all closing div comments BFORE the </div>!Thanks sooo Much Suzy!
Now to try to solve that navigation thing, argh.
