|
CSS - Why Does A Few Extra Lines Shift My Wrapper?
I have a few lines of text inside a nested div. Everything is fine if I leave it at that but as soon as I add some more, the whole page (wrapper) get shifted left by 9 pixels. It causes a 'jump' hen navigating between this page and the rest of the site.
All of these pages are quite simple and were created from the same index page. HTML Code:
<div id="wrap">
<div id="content_awards">
<div id="subcontent_awards">
<div class="award_col">
<h3>Subtitle 1</h3>
Winner<br /><br />
<h3>Subtitle 2</h3>
Winner<br /><br />
<h3>Subtitle 3</h3>
Commended<br /><br />
<!--
<h3>Subtitle 4</h3>
Commended<br /><br />
-->
</div>
<br style="clear:both;" />
</div>
<br style="clear:both;" />
</div>
<br style="clear:both;" />
</div>
CSS Code:
body
{
padding:2px 0 0 0;
margin:0;
text-align:center;
font-size:14px;
background-color:#FFFFFF;
}
#wrap
{
margin:0 auto;
width:760px;
padding:0;
text-align:center;
}
#content_awards
{
margin:0 auto;
padding:20px 0 0 0;
width:754px;
color:#FFFFFF;
text-align:left;
background-color:#31578E;
clear:both;
}
#subcontent_awards
{
margin:0 auto;
padding:0 10px 10px 10px;
width:734px;
background-image:url('images/bg_awards_shadows.jpg');
background-repeat:no-repeat;
background-color:#31578E;
clear:both;
}
div.award_col
{
float:left;
margin:0 0 0 1px;
padding:0 10px 0 20px;
width:152px;
line-height:130%;
font-size:12px;
}
Thanks, Similar TutorialsI'm going through hell trying to make a site look the same in IE and Firefox. The biggest problem is the gaping spaces IE adds between elements. What is the best way to fix this? Example at patrolmag.com/new. Any advice or help would be most appreciated. P.S. How the page looks in Firefox 3 is ideal. I just need to make at least IE7 come somewhere close to matching it. I have a few lines of text which have different formatting setups. But there seems to be an extra space between the two lines of text. Why is this? Here is the css for the text: Code:
h1{
color:#534741;
text-decoration : none;
font : 20px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: bold;
padding-left: 18px;
}
h2{
font-size: 16px;
color:#1133aa;
text-align:left;
padding-left: 0px;
padding-right: 20px;
}
h3{
font-size: 12px;
color:#534741;
text-align:left;
padding-left: 0px;
padding-right: 20px;
}
Here is the text itself: Code:
<div id="centerformbottom">
<h1>or call</h1>
<div id="centerformbottomleft">
<h2>Janine Todd</h2>
<h3>312.848.9388
<a href="mailto:janine@imaginehealthsolutions.com ">janine@imaginehealthsolutions.com </a></h3>
</div><!--centerformbottomleft-->
<div id="centerformbottomright">
<h2>Bob Brodell</h2>
<h3>312.659.4242
<a href="mailto:bob@imaginehealthsolutions.com">bob@imaginehealthsolutions.com</a></h3>
</div><!--centerformbottomright-->
</div><!--centerformbottom-->
Here's a link to the page itself: http://www.childevangelismncwi.org/ImageHealth/Contact.htm Thanks! Hello, i have a DIV in which i have put a javascript for my top advertisement banner. This banner is one of those that when the user moves their mouse over it, it expands.. is there anyway i can make it so when the banner inside the div expands, the DIV height expands accordingly to the height of the banner? and when it collpases, the div will shift back to original height? thanks I've noticed when I am replacing my filler text with text that is not as long, Firefox is shifting my layout over to the right. For instance look at a look of filler text: http://www.jaycutler.com/Eumyotheria/the_beast/favorites.html Now for the replacing text: http://www.jaycutler.com/Eumyotheria/the_beast/contest_history.html You will notice if you use the sidebar (or the top nav) the shift occurs when you visit a page with a lot of content. In IE it is fine, but Firefox doesn't like. Not sure why as I use replaced text. Any ideas? The stylesheet is located here if needed: http://www.jaycutler.com/Eumyotheria/css/stylesheet.css Thanks for your time and any help that you can pass on. Brian The index page of my site shifts to the far left in IE. The background does not move (stays in center) but the rest of the page shifts far left. It only happens on the index page all others are fine. I would link to it but I am new and cannot post links...any suggestions? Thanks. The Divs holding the "In Stock" banners (absolutely positioned) on this page seem to shift to the right (the first box is missing a banner, and there is an extra banner off the page. Any idea why? Please view at woodflooringvalue.com and click on any of the product link buttons under the "in stock" heading. Thanks. Some of my pages are long enough to cause the primary vertical scroll bar to become active but most of the pages are short enough so that it stays hidden. Because of this the entire content automatically shifts to the left to accommodate the width of the scroll bar. I don't like that. I would like it to stay in the same spot no matter what. (centered) my wrapper has margin: auto, 0px; so that the page stays centered when the window size changes. Is there a way to just bump the page to the right only when the scroll bar is active? (via my external css) Thanks a bunch. (if there is a thread about this already please feel free to just post the link to it) Also, I am going to add this head-banging dude because its just so flippin stupid. I am having a problem unique to IE 8. The right most nav button jumps down a bunch of pixels. This does not seem to be happening in any other browsers, except IE 8. Some code involving said elements: Code: #nav {
right: 10px;
top: 45px;
position: absolute;
background-color: black;
height: 50px;
width: 640px;
}
ul {
text-overflow: clip;
display: inline;
border-bottom: 25px solid black;
}
li {
list-style-type: none;
float: left;
margin-top:25px;
}
#aboutButton {
display: block;
height: 20px;
width: 93px;
background-image: url(images/nav/about_button2.gif);
margin-left: 40px;
clear: both;
}
#aboutButton:hover {
display: block;
background-position: 0px 20px;
height: 20px;
width: 93px;
background-image: url(images/nav/about_button2.gif);
clear: both;
}
message me for a link to the site if you would like to see it in action. any help is appreciated. thanks! I am editing a CSS layout I have found. Basically, I want a fixed header. The original layout had the fixed header (AP Div) take up 100% width with right positioning of 16px to allow for the scrollbar, but this was making it awkward for me to centre another div within the Header/AP Div, so I have edited my layout like this: Code: <!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px;
}
#printhead {
display:none;
}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: Arial, Helvetica, sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background-color: #EAEBEB;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
position:relative;
z-index:3;
word-wrap:break-word;
}
#info {
width: 750px;
margin-right: auto;
margin-left: auto;
background-color: #666666;
padding-right: 25px;
padding-left: 25px;
}
#head {
position:absolute;
width:800px;
height:137px;
z-index:5;
border-top-style: none;
border: none;
background-color: #FFFFFF;
left: -400px;
margin-left: 50%;
}
.top-spacer {
display:block;
height:137px;
}
.btm-spacer {
display:block;
height:30px;
background-color: #FFFFFF;
width: 800px;
margin-right: auto;
margin-left: auto;
}
</style>
<style type="text/css" media="print">
html {
padding:0;
margin:0;
border:0;
background:#fff;
font-size:10pt;
font-family: arial, sans-serif;
min-height: 100%;
margin-bottom: 1px;
}
body {
padding:0;
margin:0;
border:0;
}
#content {
display:block;
position:relative;
z-index:3;
word-wrap:break-word;
}
#head {
display:none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#printhead {
height:100px;
background:#fff;
font-size:24pt;
color:#000;
border-bottom:1px solid #000;
}
</style>
</head>
<body>
<div id="head"></div>
<div id="content">
<div class="top-spacer"></div>
<div id="info">
<p>Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here </p>
<p> </p>
</div>
<div class="btm-spacer"></div>
</div>
</body>
</html>
Basically, I have cheated to centre the AP Div, but now in Firefox, when there is overflow, the Div underneath the header moves over to accommodate the scrollbar, but the header doesn't. Can anyone suggest a workaround for this? Thanks. in Dreamweaver, how do I change alignment of e.g subNavColumn div tag within wrapper Div Tag, I wish to align subNavColumn on left of page. Banner and NavBar extend across full page. I have been unable highlight layer to change properties, must a CSS Stylesheet be attached at outset, could this be part of my problem. Also how can I remove gap showing between layers in IE. I wish to contain all div tags together, Would appreciate help. Hi, My website is deployed at www.wecook.co.uk and i'm having problems with the gray background - i want it to be at least as long as the users page(without specifying a height) - how can i do this? the stylesheet can be seen at www.wecook.co.uk/wecook/wecook.css Any help is appreciated. Thanks Hey everyone, I am doing some stuff to my site, and I noticed that when someone clicks a link, the text shifts sligtly to the left. I thought it would be the active border, but I am not sure. It is a small bug, but it is kind of annoying me. Here is my link code. Code: #main a:link {
color: #41619a;
padding: 0;
}
#main a:visited {
color: #41619b;
}
#main a:hover {
text-decoration: underline;
}
#main a:active {
border: 0;
}
Here is one of the pages where it happens. Any suggestions on how to fix this? Hello CSS gurus, When I add an italic font style to my web page, it causes a vertical shift in IE6. Everything is fine in Firefox. Can anyone tell me what is happening with this? Vertical Shifted with Italics: http://www.innovations-online.com/t...ch_news_it.html No Italics is Fine: http://www.innovations-online.com/t.../tech_news.html The same problem occurs with oblique. Thanks in advance! Darin I just noticed an issue I'm having related to the content on almost all the pages on my site. I have the code below for the body and the #page div. The #page div is supposed to be like a wrapper that encompasses everything. I just tried putting in a border (border: 1px solid #FFFF00 for the #page div so I could see how everything lined up within it (since I have the same background-color for the body and the #page div I can't normally see this). When I added this yellow border, I found only one page where the border went around everything. On all the other pages, the border seems to either not close or to only go around the content near the top of the page or to go around nothing. I think this means that all the code that I have in the #page div is not being applied to most of the content on each of those pages. I'm having a hard time understanding why that border I inserted does not go all the way around everything (why the #page div does not seem to be including everything). I have the div properly closed at the bottom of the page (</div></body></html>) and this is even happening on pages where I have no validation errors. body { background-color: #000000; margin: 0px; } #page { width: 960px; font-size: 14px; font-family: verdana, sans-serif; color: #26D578; background-color: #000000; margin-left: auto; margin-right: auto; margin-top: 16px; } I'm looking to basically replicate the design of Engadget. Not entirely, just the real basic design of it. I'm trying to figure out how to use 4 different images (a right header, left header, left footer, right footer) to construct a site that resizes in different browsers to look good. How do I do this? I'm familiar with CSS and html. I want to make the images in Fireworks and slice them, but after I do that and have the html how do I do things like using a wrapper? Thanks for any help you can offer. Wondering if anyone could help me root this problem out. I find that when content forces a scrollbar on the browser window, everything in my wrapper div gets nudged to the left about 10 px. I'm using a sticky footer, but other than that, nothing too shifty. Anyone have an ideas? If you Google Black Warrior Review, you can see the site. Here's the pertinent CSS, including Ryan Fait's sticky footer: * { margin: 0; } a:link { text-decoration: none; color: #000000; } a:visited { text-decoration: none; color: #000000; } a:hover { text-decoration: none; color: #FF00FF; } a:active { text-decoration: none; color: #FF00FF; } html{ height: 100%; } body { background-attachment: fixed; background-image: url(background4.jpg); background-repeat: repeat-x; background-position: bottom; text-align: left; height: 100%; font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; } p { padding-bottom: 16px; } .wrapper { min-height: 100%; height: auto !important; height: 100%; /* the bottom margin is the negative value of the footer's height */ margin-top: 0; margin-right: auto; margin-bottom: -35px; margin-left: auto; width: 600px; } .menu { font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding-left: 10px; text-align: left; color: #000000; width: 650px; } .content { width: 590px; line-height: 16px; padding-top: 10px; padding-right: 0px; padding-bottom: 50px; padding-left: 10px; } h1 { font-family: Arial, Helvetica, sans-serif; font-size: 63px; font-weight: bold; width: 590px; padding-left: 7px; margin-bottom: -7px; padding-right: 3px; padding-top: 20px; } h2 { margin-left: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bolder; width: 590px; padding-left: 10px; padding-top: 30px; padding-bottom: 0px; } h3 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bolder; padding-top: 16px; } h4 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder; padding-bottom: 16px; } .contentimg { padding-top: 10px; padding-left: 10px; } .margin { padding-left: 10px; } .revauthor { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #999999; } .revtop { vertical-align: bottom; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; } .caption { font-size: 10px; font-style: italic; text-align: right; width: 590px; padding-bottom: 10px; padding-top: 5px; } .footer a { color: #FFFFFF; .caption { font-size: 10px; font-style: italic; text-align: right; width: 590px; padding-bottom: 10px; } .contenttable { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; width: 590px; text-align: left; line-height: 16px; padding-top: 10px; padding-right: 0px; padding-left: 10px; } blockquote { padding-left: 20px; } .push { height: 35px; /* .push must be the same height as .footer */ } /* Sticky Footer by Ryan Fait */ .footer { font-family: Arial, Helvetica, sans-serif; font-size: 10px; padding-left: 10px; padding-bottom: 0px; height: 25px; vertical-align: bottom; text-align:center; color: #FFFFFF; padding-top: 10px; background-color: #999999; } I'm having trouble getting my content to contain within my wrapper in #$%@% IE. Works as expected in Firefox, of course. I simply want to create a background and then put all of my content on top of that background. CSS; Code: html, body {
margin: 0;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}
div#frameBG {
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index: 0;
}
div#wrapper {
margin: 0 auto;
width: 900px;
text-align: left;
z-index: 2;
}
#logo {
position: relative;
top: 50px;
border: 0;
padding: 0;
}
HTML; Code: <BODY> <DIV class="frameBG"><img src="images/dk-green-rect.jpg" width="100%" height="100%"></DIV> <DIV class="wrapper"> <!-- Setup the header area --> <DIV id="logo"><img src="images/header_01.jpg"></DIV> </DIV>--> </DIV> </BODY> </HTML> And with that, presto! IE 8 intelligently puts the logo at the bottom of the page. I'd almost rather build tables nested 20 deep than deal with this! Hello all, I've looked all over the place but cannot seem to find anywhere that explains how to add a footer to a CSS page. Basically i have a wrapper div, which is set to 100%, and within this I'd like a footer which would be alligned to the bottom of the wrapper. I just cannot seem to do it. Would it be a case of creating a new box, and having it aligned to 'bottom'? Hi, I'm new to the forum and very new to CSS, so please excuse my ignorance or any stupid fundamental mistakes I have made. I have almost got what I need to work, but my wrapper and the leftshade and rightshade div heights will not work with the height of the page. If I set them to a preset pixel height, they're fine, but when I set them to auto they disappear. I need them to be able to scroll to whatever the length of my content is going to be. I could really use some advice on how to sort this. Many thanks in advance. Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Heading</title>
<style type="text/css">
<!--
body {
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
background-color: #C2FFC1;
}
#wrapper {
width:960px;
height:auto;
margin-right: auto;
margin-left: auto;
}
#middle {
position:relative;
top:0px;
width:940px;
height:auto;
float: left;
background-color: #FFFFFF;
}
#leftshade {
top:0px;
width:10px;
height:600px;
float: left;
background-image: url(images/shadeleft.png);
background-repeat: repeat-y;
}
#rightshade {
top:0px;
width:10px;
height:600px;
float: left;
position: relative;
background-image: url(images/shaderight.png);
background-repeat: repeat-y;
}
#banner {
width:940px;
height:150px;
background-color: #FFFFFF;
}
#navbar {
width:940px;
height:50px;
background-color: #6DC072;
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #666666;
border-bottom-color: #666666;
text-align: left;
vertical-align: middle;
}
}
#centre {
position:relative;
width:580px;
height:257px;
padding: 10px;
float: left;
}
#content {
width:940px;
height:auto;
background-color: #FFFFFF;
}
#contentleft {
position:relative;
width:150px;
height:auto;
float: left;
padding: 10px;
}
#contentmiddle {
position:relative;
width:580px;
height:auto;
padding: 10px;
float: left;
}
#contentright {
position:relative;
width:150px;
height:auto;
float: right;
padding: 10px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="leftshade"></div>
<div id="middle">
<div id="banner"></div>
<div id="navbar"></div>
<div id="content">
<div id="contentleft">
<p>f</p>
</div>
<div id="contentmiddle">
<p> </p>
</div>
<div id="contentright">
<p> </p>
</div>
</div>
</div>
<div id="rightshade"></div>
</div>
</div>
</body>
</html>
|
|||||||