1. Home
  2. Forums Index
  3. Browser Side / CSS 10:50 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS IE link text job problem

single-line pixel text jog in IE7/Win

         

Alayne

10:58 pm on Feb 13, 2009 (gmt 0)

10+ Year Member



I am new to this forum even though I research a lot here. I need your advice please. I have tried everything suggested here and on different sites, and have fixed many issues, (thank you), however my last problem no matter what I try does not seem to work, I have tried adding, removing, boarders, floats, padding, then I checked for the "haslayout" and fixed that. The page still jogs up one and to the left one pixel when one of the links in the top_nav is clicked, the page moves, and it also shifts the text in the "read more" to the left, when the link is in the visited state. If I take out the top_nav, the page is fine. I went through and put a width and height on everything, I can't understand what I have done wrong. I am posting the whole CSS/html, since somthing at the bottom could be causing the problem. I have been working on this problem 2 days to clean it up. Since I am new please let me know if this post is too long. Thank you in advance.

Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Widgets</title>
<!--[if IE]>
<style type="text/css">
body {word-wrap: break-word;}
</style>
<![endif]-->
<style type="text/css">
<!--
* {zoom: 1.0;}
* {margin: 0; padding: 0; border: 0;}
body {
margin-left: 0px 0px 0px 0px;
text-align: center;
background-color: #C7D8D5;
}
#wrapper_body {
margin-left: auto;
margin-right:auto;
text-align:left;
height: 100%;
width: 100%;
border: solid #000000 thin;
}
#wrapper_header {
width: 100%;
position: relative;
height: 512px;
background-image: url(../images/toprepeat.jpg);
background-repeat: repeat-x;
}
#wrapper_headercontent {
width:936px;
margin-left: auto;
margin-right: auto;
height: 512px;
margin-top: 0px;
}

#logobanner p {
font-family: "Times New Roman", Times, serif;
font-size: 3.0em;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-align: center;
margin: 50px;
}

#logobanner {
width: 936px;
height: 170px;
position: relative;
background-image: url(../images/blueHeader.jpg);
margin-top: 38px;
}

#date {
width:936px;
position: relative;
height: 24px;
background-image: url(../images/content_background.jpg);
font-family: "Times New Roman", Times, serif;
font-size: 0.9em;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
text-align: center;
letter-spacing: 0.9em;
margin-left: auto;
margin-right: auto;
border-bottom: solid #382C15 .04em;
}
#picturebanner {
width: 936px;
height: 265px;
position: relative;
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
background-color: #0A0102;
}

#wrapper_content {
width: 100%;
position: relative;
background: url(../images/back1680.gif) repeat-y;
height: 100%;
}
#wrapper_midcontent {
width: 100%;
margin-left: auto;
margin-right: auto;
background: url(images/back1680.gif) repeat-y;
position: relative;
height: 100%;
}

#maincontent{
width: 936px;
position: relative;
background-image: url(images/content_background.jpg);
margin-left: auto;
margin-right: auto;
}
#contentright {
width: 680px;
margin-left: 232px;
}
#breaker{
width: 100%;
position: relative;
height: 25px;
}
#btmcontetnleft {
width:460px;
position: relative;
height: 100%;
}
#btmcontentright{
width: 150px;
position: relative;
}
#wrapperbtmcontent {
position: relative;
width: 451px;
margin-left: 15px;
height: 235px;
}
#wrapper_footer{
width: 100%;
position: relative;
clear: both;
height: 101px;
background-image: url(../images/footergradient.jpg);
background-repeat: repeat-y;
}
#footer {
width: 937px;
position: relative;
margin-left: auto;
margin-right: auto;
height: 100px;
background-image: url(../images/footer936.jpg);
background-repeat: no-repeat;
}

.date {
font-family: "Times New Roman", Times, serif;
font-size: .70em;
font-style: normal;
color: #444;
}
#maincontent #leftnav {
width:217px;
position: relative;
background-image: url(../images/content_background.jpg);
background-repeat: repeat-y;
padding-left: 12px;
height: 100%;
float: left;
}
#maincontent #leftnav h3 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 1.2em;
color: #8d9424;
margin-top: 15px;
margin-bottom: 0px;
}
#maincontent #leftnav ul {
color: #403320;
text-decoration: none;
list-style-type: none;
text-indent: -12px;
margin-top: -1px;
}
#maincontent #leftnav ul li {
color: #403320;
text-decoration: none;
list-style-type: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left: 1.5em;
}
#maincontent #leftnav ul li a:link, a:active {
color: #403320;
text-decoration: none;
list-style-type: none;
}

#maincontent #leftnav ul li a:hover {
color: #267997;
text-decoration: none;
list-style-type: none;
}
#maincontent #leftnav ul li a:visited {
color: #7f8c19;
text-decoration: none;
list-style-type: none;
}
#contentright h2 {
color: #8d9424;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
margin-top: 15px;
margin-bottom: 20px;
}

#contentright p {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #382C15;
margin-left: 15px;
margin-bottom: 1.75em;
}
#contentright p a:link{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #84aaa3;
text-decoration:none;
}
#contentright p a:visited{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #84aaa3;
text-decoration:none;
}
#contentright p a:hover{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #84aaa3;
text-decoration:none;
}
#contentright p a:active{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #84aaa3;
text-decoration:none;
}
#contentright h3 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #382C15;
margin-top: 0px;
margin-left: 15px;
}
#contentright ul {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.0em;
line-height: 1.2em;
text-decoration: none;
list-style-type: circle;
}

#contentright ul li {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.3em;
text-decoration: none;
margin-bottom: 6px;
}
#breaker p {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.0em;
line-height: 1.5em;
color: #382C38;
}

#maincontent #contentright p.readmore {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
background-image: url(./images/btnteal.gif);
background-repeat: no-repeat;
display: block;
color: #ffffff;
text-decoration: none;
background-position: 0 0;
text-indent: 5px;
line-height: 1.5em;
}
#contentright p.readmore a:link {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
line-height: 1.5em;
margin-left: 0px;
text-indent: 5px;
}
#contentright p.readmore a:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #DAD5B8;
text-decoration: none;
line-height: 1.5em;
margin-left: 0px;
text-indent: -3px;
}
#contentright p.readmore a:hover a:active {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
line-height: 1.5em;
margin-left: 0px;
text-indent: 5px;
}

#wrapperbtmcontent #btmcontetnleft ul {
list-style-type: none;
}
#btmcontetnleft ul li {
float: left;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
display: inline;
width: auto;
}

#btmcontetnleft ul li img {
border: 2px solid #237a99;
float: left;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
display: inline;
}

#top_nav {
position: relative;
background-color: #ABB926;
width: 100%;
height: 30px;
}

#top_nav ul {
text-decoration: none;
text-align: center;
}

#top_nav ul li {
text-decoration: none;
display: inline;
list-style-type: none;
margin-right: 4em;
}

-->
</style>
</head>
<body>
<div id="wrapper_body">
<!--header-->
<div id="wrapper_header">
<div id="wrapper_headercontent">
<div id="logobanner">
<p>The Top Banner</p></div>
<div id="top_nav" ><ul><li><a href="#">top nav</a></li><li><a href="#">top nav</a></li><li><a href="#">top nav</a></li><li><a href="#">top nav</a></li><li><a href="#">top nav</a></li><li><a href="#">top nav</a></li></ul></div>
<div id="picturebanner"></div>
</div>
</div>
<!--end header-->
<!--begin mid content-->
<div id="wrapper_midcontent">
<div id="maincontent">
<div id="date">2009 The Top Text 3rd Edition</div>
<div id="leftnav">
<h3>Need Help</h3>
<ul>
<li><a href="getting_started.html">Getting Started</a></li>
<li><a href="web_design_process.html">Links</a></li>
<li>Links</li>
<li>Links </li>
</ul>
<h3>Links</h3>
<ul>
<li>Links</li>
<li>Links</li>
<li>Links</li>
<li>Links</li>
</ul>
<h3>Links &#8211; Links</h3>
<ul>
<li><a href="learn_webdesign.html">Web Links</a></li>
<li>Links</li>
<li>Links</li>
</ul>
<h3>Free Stuff I Found</h3>
<ul>
<li><a href="freestuff_webdesign.html">Web Design</a></li>
<li>link 55 &amp; 111</li>
<li>Elements</li>
</ul>
<h3>Places to Sell Your Stuff</h3>
<ul>
<li>widgets</li>
<li>widgets</li>
<li>the other</li>
</ul>
<br />
</div>
<div id="contentright">
<h2>Top Title </h2>
<h3>Welcome! </h3>
<p><a href="#">link test</a> those at the coal face don't have sufficient view of the overall goals. Whenever single-loop learning</p>
<p class="readmore"><a href="getting_started.html" >Read More &nbsp;</a>Top Title</p>
<img src="images/line.gif" alt="" width="640" height="4" />
<h2>Reasons to Another Header</h2>
<h3>Hthose at the coal face . . . </h3>
<p><a href="#">link test</a> those at the coal face don't have sufficient view of the overall goals. Whenever single-loop learning strategies</p>
<p class="readmore"><a href="reasons.html">Read More</a>&nbsp;&nbsp;Reasons You Should Have another Header</p>
<img src="images/line.gif" alt="" width="640" height="4" />
<h2>Showcase Your Header</h2>
<h3>Getting Started . . .</h3>
<p><a href="#">link test</a> those at the coal face don't have sufficient view of the overall goals. Whenever single-loop learning strateg</p>
<p class="readmore"><a href="getting_started.html">Read More</a>&nbsp;&nbsp;What You Need to Showcase</p>
<img src="images/line.gif" alt="" width="640" height="4" />
<br />
<div id="wrapperbtmcontent">
<div id="btmcontetnleft"><ul><li><img src="images/delphi1.jpg" alt="text" width="90" height="83" /></li><li><img src="images/faith.jpg" alt="text" width="90" height="83" /></li><li><img src="images/puppy.jpg" width="90" height="83" alt="text" /></li></ul>
<ul><li><img src="images/church.jpg" alt="text" width="90" height="83" /></li><li><img src="images/osp.jpg" alt="test" width="90" height="83" /></li><li><img src="images/usap.jpg" width="90" height="83" alt="" /></li></ul></div>
</div>
</div>
</div>
</div>
<!--end content-->
<!--Start footer-->
<div id="wrapper_footer">
<div id="footer"></div>
</div>
<!--end footer-->
</div>
</body>
</html>

[edited by: swa66 at 9:29 am (utc) on Feb. 17, 2009]
[edit reason] removed specifics [/edit]

dreamcatcher

7:17 am on Feb 17, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



HI Alayne, welcome to WebmasterWorld.

It looks as though your rather large code dump put people off responding. Sometimes we don`t have time to trawl through big blocks of code, sorry.

Did you find a solution to your problem?

dc

swa66

9:35 am on Feb 17, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'd suggest a run following the bullet list in the first post of [webmasterworld.com...]
(basically : remove all, then add till the problem resurfaces)
now start removing again one by one, make sure the problem doesn't disappear, if it does, add it back.

That should help you to significantly narrow down the amount of code to illustrate the problem without having all of the above.

swa66

9:42 am on Feb 17, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm a bit wondering about the text-indent use in "#contentright p.readmore a" in the different states (link, visited, hover, active), esp with visited being different.
But that's not your top_nav ...

Alayne

10:49 pm on Feb 17, 2009 (gmt 0)

10+ Year Member



Hi DC and swa66 thank you so much for responding. I know now the code dump was WAY too big :)

I was so frustrated. I got some sleep, stripped everything down to the bear essentials and started adding in the styling a little at a time. I found the problem(s), and yes the text-indent was one of them and so was a negative margin fighting with padding. I will not do a dump this large again. Next time I will ask questions that are better thought out and post them when I am better rested!
Again, Thank you so much, the text-indent idea was what helped me solve the problem(s)

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:50 pm May 1, 2026