|
CSS - More Padding Issues Ie Adding Double The Specified Height
Similar TutorialsHello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? 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>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> The site can be viewed he http://oharenoise.org/new/ I am having issues with padding on this newly revised website, specifically in the left column division. For example, I'd like the "Special Information" heading to have larger padding above it & less padding below. No matter what values I enter into the padding attributes, nothing changes. I'm having the same problem with the "Featured Publications" too, further down the page. Hi All, Im giving my site a slight update, but have encountered a strange IE problem. Saying that i have nothing but problems with IE some days with both 6 and 7. The menu system seems to work fine in Safari and firefox, however in IE the last tab seems to go to the next line. I think it may be a problem with the padding/margin however thats only a guess. Any help would be appreciated. Thanks Here is the link: http://www.michaelpalmer.info/new/index.php Here is the full CSS code: http://www.michaelpalmer.info/new/css/style.css Here is the CSS code for the menu system: css Code: Original - css Code /************ pageMenu ************/ #pageMenu { background: repeat url(../images/pageLayout/pageMenu.gif); width:780px; margin: 0px auto; border-left: 1px solid #000000; border-right: 1px solid #000000; } .menuButton { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/blackDot.gif) bottom repeat-x; color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrent { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrent.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrentLeft { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrentLeft.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrentRight { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrentRight.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} /* End hide from IE-mac */ .menuCurrentLeft a { color: #000000; text-decoration: none; } menuCurrentLeft a:hover { color: #000000; text-decoration: none; } .menuCurrentRight a { color: #000000; text-decoration: none; } menuCurrentRight a:hover { color: #000000; text-decoration: none; } .menuCurrent a { color: #000000; text-decoration: none; } menuCurrent a:hover { color: #000000; text-decoration: none; } .menuButton a { color: #ffffff; text-decoration: none; } .menuButton a:hover { color: #dba549; text-decoration: none; } /************ pageMenu ************/ /************ pageMenu ************/ Heres the code for the html html Code: Original - html Code <!-- pageMenu --> <div class="clearfix" id="pageMenu"> <div class="menuButton"> <a href="index.php?page=1">Home</a></div> <div class="menuButton"> <a href="index.php?page=2">About</a></div> <div class="menuButton"> <a href="index.php?page=3">Contact</a></div> <div class="menuButton"> <a href="index.php?page=4">Downloads</a></div> <div class="menuButton"> <a href="index.php?page=5">Photos</a></div> <div class="menuButton"><img alt="." src="images/pageLayout/invisible.gif"/></div> </div> <!-- pageMenu --> <div class="clearfix" id="pageMenu"> <div class="menuButton"> <a href="index.php?page=1">Home</a></div> <div class="menuButton"> <a href="index.php?page=2">About</a></div> <div class="menuButton"> <a href="index.php?page=3">Contact</a></div> <div class="menuButton"> <a href="index.php?page=4">Downloads</a></div> <div class="menuButton"> <a href="index.php?page=5">Photos</a></div> <div class="menuButton"><img alt="." src="images/pageLayout/invisible.gif"/></div> </div> I have a page with a header, two column, and footer layout. For some reason, IE is adding 5px to the left column of the page. Here is the relevant css code. Code: #container {
width:770px;
margin:0px auto 0px auto;
background:#ffffff;
text-align:left;
}
#header {
position:relative;
width:770px;
height:109px;
background-image:url(images/header.jpg);
background-color:#ffffff;
text-align:center;
}
div#leftcontainer {
float:left;
width:190px;
background-color:#ffffff;
}
div.leftcontent {
width:190px;
background-color:#004994;
padding-left:5px;
padding-right:5px;
}
div#centercontainer {
margin-top:3px;
float:right;
width:570px;
background-color:#ffffff;
padding:0px;
}
div.centercontent {
width:560px;
background-color:#ffffff;
padding-left:5px;
padding-right:5px;
}
#footer {
clear:both;
padding:4px;
width:770px;
font-size:.8em;
font-family:arial, sans-serif, courier;
color:#ffff00;
background-color:#004994;
margin:0px 0px 20px 0px;
}
Now everything goes inside the leftcontent and centercontent classes. It displays perfectly in Firefox but IE is adding 5px on the right side of the leftcontent section which is pushing all the centercontent down. Any ideas what is causing this? I thought I got away from the IE box model bug by using boxes inside boxes. Thanks in advance. I'm still fairly new to CSS-only layouts, having always relied on tables heavily until just recently. I'm having a couple of problems that I can't seem to fix by myself. Here is an image of how the layout should look, so you can understand what I'm aiming for: http://squirrel.10pinleague.com/img/layout.jpg. And here is what it currently looks like: http://squirrel.10pinleague.com/. Here is the code that I have so far, they should be fairly clear to follow. Firstly, "index.php": Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel='stylesheet' type='text/css' href='style.css'> <title>Red Squirrel Website!</title> </head> <body> <div id="minHeight"></div><!-- Safari hack --> <div id="outer"> <div id='topspace'> | <a href='#'>Home</a> | <a href='#'>Contact</a> | <a href='#'>Sitemap</a> | </div> <div id='header'> <div class='logo'> </div> <div class='search'> <form method='post' action='index.php'> <input type='text' name='frmSearchText'> <input type='submit' value='Search' name='frmSearch'> </form> </div> <div class='links'> <table width='315' height='25'> <tr> <td width='100' background='img/headerlink.gif'> <a href='#'>Link 1</a> </td> <td width='5'> </td> <td width='100' background='img/headerlink.gif'> <a href='#'>Link 2</a> </td> <td width='5'> </td> <td width='100' background='img/headerlink.gif'> <a href='#'>Link 3</a> </td> <td width='5'> </td> </tr> </table> </div> </div> <div id='mainarea'> <div id='directory'> Directory > Home </div> <div id='leftlinks'> <div class='top'> <div class='10padtop'>Hot Links</div> </div> <div class='main'> <div class='10padleft'> <a href='#'>Link 1</a><br> <a href='#'>Link 2</a><br> <a href='#'>Link 3</a><br> <a href='#'>Link 4</a><br> <a href='#'>Link 5</a> </div> </div> <div class='bottom'> </div> <div class='top1'> <div class='10padtop'>Hot Links</div> </div> <div class='main1'> <div class='10padleft'> <a href='#'>Link 1</a><br> <a href='#'>Link 2</a><br> <a href='#'>Link 3</a><br> <a href='#'>Link 4</a><br> <a href='#'>Link 5</a> </div> </div> <div class='bottom1'> </div> </div> <!-- close "leftlinks" div --> <div id='content'> Hello!<p> </div> <!-- close "content" div --> </div> <!-- close "mainarea" div --> <div id='clearfooter'></div> </div> <!-- close "outer" div --> </div> <!-- close "minHeight" div --> <div id='footer'>Created by Rob Masters 2007 </div> </body> </html> Style.css: Code:
a:link {text-decoration: none; color: #fff; font-weight: bold;}
a:visited {text-decoration: none; color: #fff; font-weight: bold;}
a:active {text-decoration: none; color: #fff; font-weight: bold;}
a:hover {text-decoration: underline; color: #fff; font-weight: bold;}
body { font-family: verdana, arial; background-color: #f0fdee; margin: 0px; }
html,body {margin:0;padding:0}
/* commented backslash hack \*/
html, body{height:100%;}
/* end hack */
#outer{
min-height:100%;
margin-bottom:-22px;
height:auto;
width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #f0fdee;
}
* html #outer{height:100%;}
div#topspace {
position: relative;
width: 800px;
height: 20px;
text-align: right;
font-size: 12px;
}
#topspace a:link {text-decoration: none; color: #000; font-weight: bold;}
#topspace a:visited {text-decoration: none; color: #000; font-weight: bold;}
#topspace a:active {text-decoration: none; color: #000; font-weight: bold;}
#topspace a:hover {text-decoration: underline; color: #000; font-weight: bold;}
div#header {
position: relative;
width: 800px;
height: 100px;
float:left;
vertical-align:top;
border:0;
margin: 0px;
background-color: #7e3b29;
}
#header .logo {
width: 170px;
height: 75px;
background-image: url('img/logo.jpg');
}
#header .search {
position: absolute;
left: 580px;
top: 0px;
width: 220px;
height: 50px;
padding-top: 8px;
color: #fff;
text-align: center;
font-size: 12px;
}
#header .links {
margin-left: 485px;
margin-top: 75px;
width: 315px;
height: 25px;
color: #fff;
text-align: center;
font-size: 12px;
}
div#mainarea {
position: relative;
margin-top: 5px;
height: 100%;
}
#mainarea .leftlinks {
position: absolute;
left: 0px;
top: 0px;
width: 175px;
height: 100%;
float: left;
}
div#directory {
position: absolute;
left: 175px;
top: 0px;
width: 625px;
height: 20px;
background-color: #5ca354;
}
div#content {
position: absolute;
left: 175px;
top: 20px;
width: 625px;
height: 100%;
background-color: #fff;
margin-top: 1px;
}
#leftlinks .top {
width: 170px;
height: 40px;
background-image: url('img/leftlinks_top.jpg');
text-align: center;
color: #fff;
font-weight: bold;
}
#leftlinks .main {
width: 170px;
min-height: 80px;
background-image: url('img/leftlinks_bg.jpg');
}
#leftlinks .bottom {
width: 170px;
height: 18px;
background-image: url('img/leftlinks_bottom.jpg');
}
#leftlinks .top1 {
width: 170px;
height: 40px;
padding-top: 5px;
background-image: url('img/leftlinks_top.jpg');
text-align: center;
color: #fff;
font-weight: bold;
}
#leftlinks .main1 {
width: 170px;
min-height: 80px;
padding-left: 10px;
background-image: url('img/leftlinks_bg.jpg');
}
#leftlinks .bottom1 {
width: 170px;
height: 18px;
background-image: url('img/leftlinks_bottom.jpg');
}
#10padtop { padding-top: 10px; }
#10padleft { padding-left: 10px; }
#footer {
clear:both;
height:20px;
width: 800px;
margin-left: auto;
margin-right: auto;
color: #000;
border-top: 2px solid #7e3b29;
font-size: small;
font-variant: small-caps;
font-style: italic;
text-align: right;
}
#clearfooter {
clear: both;
height: 22px;
}
div>p {margin:0}
html>body #minHeight{float:left;width:0px;height:100%;margin-bottom:-22px;} /*safari wrapper */
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
td.padded { padding: 5px; }
td.lmargin10 { margin-left: 10px; }
As you can see at the url for the page I'm working on, the main content section with the white background does not stretch the 100% height to where the footer is. I'm sure this problem is to do with the div that the content div is nested within, called 'mainarea'. This is because the content div does indeed stretch to the 100% height of 'mainarea', but mainarea does not stretch all the way to the footer despite me adding the "height: 100%;" attribute. How can I fix this? Another problem is regarding padding. For some reason when I give a div a padding attribute, it changes the size of the div as well! I have illustrated this problem by using padding only on the 2nd "Hot Links" section on the left. I need to use padding to get the text in the correct position but as you can see, this padding is causing each div to expand, which in turn means that the background images do not appear as they should. What can I do to fix this as well? Thanks a lot for any help regarding either of these issues! Hi, Im trying to make a simple bar with text in the center. Im having a lot of problems with it however, because its height is 50px not 25px. The bars in question are the ones that say "Description, Payment" etc I started by setting its height to 25px in the CSS but this didnt work. Ive tried adding padding: 0px to what I thought was the relevant tag, but this doesnt change it either! This is the address to the test page: http://www.zombiemod.com/test.html This is the code: 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" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<style type="text/css">
/*<![CDATA[*/
#title {
border-top:2px #000000 solid;
border-bottom:3px #000000 solid;
}
#mainNav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
float: right;
height: 61px;
}
#mainNav li {
float: left;
margin-top: 38px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
}
#mainNav li a {
margin: 0px;
background-attachment: scroll;
background-image: url(http://img12.imageshack.us/img12/3157/tabs2d.png);
background-repeat: no-repeat;
background-position: right 0px;
font-weight: normal;
color: #efeeee;
font-family: Verdana;
text-decoration: none;
height: auto;
width: auto;
float: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainNav li a:hover {
font-weight: bold;
color: #efeeee;
}
#mainNav li a span {
background-attachment: scroll;
background-image: url(http://img12.imageshack.us/img12/3157/tabs2d.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 30px;
height: 19px;
width: auto;
float: left;
cursor: pointer;
cursor: hand;
margin: 0px;
}
#horinav li {
float:left;
width:23%;
text-align:center;
}
p.c13 {text-align: left}
span.c12 {color: #efeeee}
h3.c11 {color: #000000; font-family: Verdana; text-align: center}
div.c10 {text-align: left}
table.c9 {border-collapse: collapse}
span.c8 {font-family: Verdana; font-size: 80%}
p.c7 {font-family: Verdana; font-size: 80%}
span.c6 {color: #000000; font-family: Verdana; font-size: 14}
p.c5 {text-align: center}
span.c4 {font-family: Arial, Helvetica, sans-serif; font-size: 200%}
tr.c3 {background-image: url(http://img6.imageshack.us/img6/3518/63387888.jpg)}
tr.c14 {background-image: url(http://img6.imageshack.us/img6/2466/bgthin.jpg)}
span.c2 {font-family: Arial, Helvetica, sans-serif; font-size: 120%}
span.c1 {color: #232323}
</style>
<style type="text/css">
/*<![CDATA[*/
img.c7 {padding: 5px; border: 1px solid #ffcc00;}
tr.c6 {background-color: #000033}
td.c5 {background-color: #FFFFFF}
tr.c4 {background-color: #FFFFFF}
li.c3 {list-style: none}
tr.c2 {background-color: #FFEDA3}
span.c1 {color: #EFEEEE}
/*]]>*/
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" id="title">
<tr class="c3">
<td align="left"><span class="c2"><strong><span class="c1"><a name="top" id="top"><img src="http://img200.imageshack.us/img200/9856/alienware.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></span></strong></span>
<ul id="mainNav">
<li><a href="#Description"><span>Item</span></a></li>
<li><a href="#Payment"><span>Payment</span></a></li>
<li><a href="#Shipping"><span>Shipping</span></a></li>
<li><a href="#Policies"><span>Pictures</span></a></li>
</ul>
</td>
</tr>
</table>
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr class="c4" valign="top">
<td align="center">
<div class="c10">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="c9">
<tr class="c14 c2">
<td width="100%" colspan="3">
<p class="c5"><strong><span class="c6"><a name="Description" id="Description"><span class="c1">Description</span></a></span></strong></p>
</td>
</tr>
<tr>
<td width="49%" align="left" valign="top">
<p class="c7"><br />
Test.</p>
</td>
<td width="2%" align="right" valign="top"></td>
<td valign="top" width="49%">
<ul>
<li class="c3"><br /></li>
<li><span class="c8">Test</span></li>
<li class="c3"><br /></li>
</ul>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Payment" id="Payment"><span class="c1">Payment</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="2"><br />
<br />
<span class="c8">Test.<br /></span><br />
<br />
<br /></td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Shipping" id="Shipping"><span class="c12">Shipping</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="20"><br />
<br />
<span class="c8">Put your Shipping information here.<br />
There are <br> tags here to fill the cell, take them out after inserting you text.</span><br />
<br />
<br /></td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Policies" id="Policies"><span class="c12">Pictures</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="20">
<p class="c13"><br />
<br />
<span class="c8"><br /></span></p>
<ul id="horinav">
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
</ul>
<br /></td>
</tr>
</table>
</body>
</html>
Ive put it through a validator, now it validates, but it still doesnt work. I believe the tag in question is c14 and c2. Hi. I'm trying to update a site to use CSS instead of tables and I'm having some issues with the top banner and the lovely IEs. Basically, IE6 seems to be acknowledging some padding/margins for my "banner" div and both IE6 and 7 have some extra spacing below my H1/logo image that Firefox/Opera properly display. I put up a screen shot of Firefox (far left), IE7 (middle), and IE6 (upper right) showing the discrepancies at "hxxp://ns1.zivix.com/~mbydalek/sample/Screenshot.png" Here are the specific problems that I am trying to fix: 1) The floated H1 (background green) should have 0 spacing at the bottom, yet IE6/7 both show some extra green indicating some extra spacing 2) IE6 has the banner a few pixels off to the right and actually a couple pixels taller than it's supposed to be, which is the height of the floated right image. I put the code and css up at: hxxp://ns1.zivix.com/~mbydalek/sample/admin.html hxxp://ns1.zivix.com/~mbydalek/sample/css/master.css Any help would be greatly appreciated! Regards, Mike * On a side note, how the heck do you post URLs (with or without bbcode) on these forums? Any url I try (even if I copy/paste directly from the help) gets replaced with a "(URL address blocked: See forum rules)" Well, I don't see anything in the rules and I've read/searched through them now for 20 mins and am not having any luck. I am having what seems like the most elementary problem, yet I cannot figure out what is causing it. I am creating DIVs and nested DIVs to position, contain and format my content. And for some reason, adding padding to a style applied to a given DIV is causing that DIV to expand by the amount of padding added. So for example, if I have a style: Code: #contentBox {
width: 500px;
background-color: blue;
}
And apply it like so: Code: <div id="contentBox">My content goes here</div> It displays as it should: a blue box that is 500px wide. But if I change the style to add padding to the box likee so: Code: #contentBox {
width: 500px;
background-color: blue;
padding: 10px;
}
The blue box is now 520px wide (it added the 10 px of padding on either side to the overall width. I thought that the padding was included in the width of a box so that changing the padding would not change the amount of space occupied by that element. Am I wrong or missing something here? Nevermind guys, I figured it out. I looked back at an old thread I posted about a year ago with the same issue. The fix was to add vertical-align: top; to the flt_rt img css. ========================================== This issue is affecting both FF (3) and IE (6)...I haven't tested in another browser yet. I just inherited this site and am in the process of converting it from a table layout to valid css. EVerything's going pretty well with the exception of my right column images. An approximately 5px gap is appearing so the images do not fit flush. I have looked at this so long that I can't see where it's happening and would appreciate another set of eyes. This version of the site is on a private test server, so I've attached screenshots. In each screenshot you will see the gap colored in green. In FF it appears below the images, while in IE it's appearing in between. Thanks in advance! Here is my css: Code:
@charset "UTF-8";
body {
background-color: #191919;
margin-top: 5%;
}
.heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
color: #000000;
padding-left: 30px;
padding-top: 30px;
text-align: left;
}
.heading2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #B3DB10;
display: block;
width: 525px;
padding-left: 30px;
line-height: 140%;
padding-top: 10px;
}
.style2 {
color: #FFFFFF;
background-color: #7d990b;
display: block;
position: static;
padding-left: 8.5px;
height: 18px;
padding-top: 5.5px;
}.maintext {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 140%;
padding-top: 0px;
padding-left: 35px;
padding-right: 30px;
color: #333333;
}
.column1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 140%;
padding-top: 0px;
padding-left: 35px;
padding-right: 30px;
color: #333333;
}
.column2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 140%;
padding-top: 0px;
padding-left: 0px;
padding-right: 30px;
color: #333333;
}
.heading3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #999999;
display: block;
width: 525px;
padding-left: 30px;
line-height: 140%;
padding-top: 10px;
}
.maintext2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 200%;
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
color: #CCCCCC;
}
.heading4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #CCCCCC;
display: block;
width: 525px;
padding-left: 30px;
line-height: 140%;
padding-top: 0px;
}
HTML (with some content removed) Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home - .</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style3 {color: #B3DB10}
-->
#container {
width: 925px;
height: 600px;
text-align: center;
margin: 0 auto;
padding: 0;
}
#nav {
float: left;
width: 200px;
height: 425px;
background-color: #b3db10;
}
#nav ul {
margin: 27px 0 0 0;
padding: 0;
}
#orion_logo {
border: none;
}
#rcol {
float: right;
height: 425px;
width: 725px;
}
#heading {
float: left;
height: 47px;
width: 475px;
background-color: #ababab;
padding: 53px 0px 0px 30px;
margin: 0;
font: 20px normal;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
}
#maintext {
clear: left;
float: left;
background-color: #FFFFFF;
height: 325px;
width: 505px;
text-align: left;
}
#flt_rt {
float: right;
width: 220px;
height: 425px;
background-color: green;
padding: 0;
margin: 0;
}
#flt_rt img {
padding: 0;
margin: 0;
}
#heading2 {
clear: both;
height: 155px;
width: 725px;
background-color: #000000;
text-align: left;
padding-left: 200px;
padding-top: 20px;
}
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="nav">
<a href="http://">
<img src="images/logo.png" width="200" height="100" alt="Orion logo" title="http://www..com" id="orion_logo"/>
</a>
<ul id="MenuBar1" class="MenuBarVertical">
<li><span class="style2"> Home</span> </li>
<li><a href="02.html"> Proven Credibility</a></li>
<li><a href="03.html"> Leading-Edge Products</a> </li>
<li><a href="04.html"> Benefits of the Program</a></li>
<li><a href="05.html"> Benefits of the Products</a></li>
<li><a href="06.html"> Benefits of the Partnership</a></li>
<li><a href="07.html"> Contact</a></li>
<li><a href="http://www.com/login.asp"> Partner Login</a></li>
</ul>
<a href="07.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/apply2.gif',1)"><img src="images/apply1.gif" name="Image4" width="100" height="20" hspace="50" vspace="30" border="0" id="Image4" /></a>
</div> <div id="rcol">
<h1 id="heading">Stake Your Claim in a Billion Dollar Industry!</h1>
<div id="flt_rt">
<img src="images/orion2.jpg" width="220" height="216" alt="" /><img src="images/orion05.jpg" width="220" height="209" alt=""/>
</div>
<div id="maintext">
<p class="maintext">text here<br />T</p>
<p class="maintext">text here</p>
<p class="maintext"><strong></strong>, President and CEO</p>
</div>
</div>
<div id="heading2">
<span class="maintext2">The U.S. Retrofit Market Opportunity:</span>
<span class="heading4"><span class="style3">text<br />
<span class="style3">20.6 billion</span> square feet need to be retrofitted*<br />
<span class="style3">$9.6 billion</span> retrofit market size</span>
<span class="maintext2">*Source: EIA 2003</span>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</div> <!-- end container -->
</body>
</html>
Okay this is still the same page I posted about but a little different problem as I fixed the other one. In IE my wrapper is extending way beyond 770px to about 991px. You can see this in the image below. It shows the green border way beyond where the main content ends to the right. Edited to add that I figured out my problem with the image aligning to the right. I had 2px padding set all round on the container box for it All the content looks correct in FF (suprise suprise). My CSS: Code:
#wrapper {
text-align: left;
margin: 0px auto;
width: 770px;
}
/* column container */
#colcont {
float: left;
width: 550px;
}
/* columns */
#lcol {
float: left;
width: 180px;
max-width: 180px;
vertical-align: top;
}
#mcol {
float: right;
width: 366px;
vertical-align: top;
}
#rcol {
float: right;
width: 210px;
max-width: 210px;
margin-left: 10px;
vertical-align: top;
}
/* login box */
.metro_wrap {
width: 200px;
margin-left: 10px;
}
.login_top {
width: 200px;
height: 260px;
background: #54B043 url(/theme/Metrocom/login_top.gif) top right no-repeat;
}
.metrologin {
background: #54B043 url(/theme/Metrocom/login_bottom.gif) no-repeat;
height: 588px;
color: #FFFFFF;
vertical-align: top;
}
.loginbar {
background: #54B043;
padding: 4px;
color: #FFFFFF;
font-weight: bold;
height: 34px;
}
HTML -- This is the DIV that holds the image Code: <div class="metro_wrap">
<div class="login_top"></div>
<div class="loginbar">
Welcome to www.tdsmetro.net.<br />
Please sign in.
</div>
<div class="metrologin">
<?if($msg) {?>
<span class="autherr">$msg</span>
<?}?>
<div class="login">
<form class="nopad" action="/login.php" method="post" onsubmit="return(ck_login(this.user));">
<input class="login" type="text" name="user" maxlength="50" size="24" />
<br />
<strong>User Name</strong> (joe.smith@tds.net)<br /><br />
<input class="login" type="password" name="pass" maxlength="30" size="24" />
<br />
<strong>Password</strong><br /><br />
<div align="center">
<input class="login" type="submit" value="Sign In" name="submit" />
</div>
</form>
</div>
<br />
</div>
</div>
Here is the way that the divs are laid out. I didn't want to put evertyhing because it'd be huge. Code:
<div id="wrapper">
...some nav stuff...
<div id="colcont">
<div class="animetro_news">
some more stuff
</div>
<!-- Left Column -->
<div id="lcol">left column</div>
<!-- Middle Column -->
<div id="mcol">middle</div>
</div> <!-- end colcont-->
<!-- Right Column -->
<div id="rcol">right column</div>
</div> <!-- end wrapper -->
Hey all... I'm doing some testing in Firefox, and I've encountered a problem. Code: <div style="background-color: #FF9801; height: 33px; width: 99px; text-align: center; display: inline; padding-top: 8px;">Help</div> My intention here is to create a box that is 99px high, 33px wide, and with the text in the middle. In IE6, this appears to be fine. However, when testing it out in FF, I don't get the spacing that I want. Here's the kicker: When I add the float element, (float: left), it comes out the way I want it to. But it does seem to add a bit of whitespace above and to the left of it. I don't want the whitespace! Can anyone help with a compromise that will work in both browsers? My CSS usage has been pretty light until up to this issue. Thanks in advance! I have been struggling with this problem since i first started creating this layout (ages ago, but for development reasons, i stuck static width/heights in, just to work on my screen). I have searched google numerous times, but with no avail, as sites go on about something which is irrelevant to what im wanting (so maybe vague/bad use of keywords in search). any way i did a quick search on here, and any help given, does not seem to fix up my layout. My first basic problem is having a side navigation bar to fill the height of the screen, plus the header which is a static height. All this without creating scroll bars for the browser My second problem, which may be more or less the same as the above (miss-understanding of css), having a 100% height which includes padding. Link: http://dlym.net/testing/css_help.php Source (html) Code: <html> <body> <div id="container"> <div id="top">header</div> <div id="sidebar">laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br>laaa<br></div> <div id="content"> <div id="childcontainer"> <div id="paddedbox"> <div id="test1">title</div> <div id="test2"> <div id="myElement"><a onclick="">main content</a></div> </div> </div> </div> </div> </div> </div> </body></html> CSS Code:
html, body
{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
#container
{
width: 100%;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
max-height:100%; /* real browsers */
background-color:grey;
position: relative;
}
#top
{
width: 100%;
height: 100px;
background-color:pink;
}
#main
{
width:100%;
height:100%;
}
#sidebar
{
background-color:red;
width: 150px;
height: 100%;
float: left;
}
#content
{
background-color:blue;
overflow:hidden;
padding:10px;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
max-height:100%; /* real browsers */
}
#childcontainer
{
background-color:white;
padding:10px;
}
#paddedbox
{
background-color:green;
margin-bottom:0px;
margin-top:0px;
overflow:hidden;
}
#test1
{
width:100%;
height:20px;
background-color:yellow;
}
#test2
{
width:100%;
height:100%;
background-color:lime;
}
The above is a simplified version of my site's layout, but they are the core div containers which i am trying to get positioned correctly. I seriously will thank any one who gives any help which leads me to fix this problem, as i am not too skilled with css, and this has been troubling me for some time. Thank you Hey y'all. I was hoping someone could help me with some minor margin/padding issues. At one point I knew how to fix this, but I can't for the life of me remember. The site is www (dot) texasarmor (dot) com I like the way the divs are spaced in IE but I don't know how to make IE and Firefox the same. Please help... Also, please if you could, any critiques? Suggestions? Thanks very much. -michael Hello all. This is a problem I am encountering on many placing: when I put a width to an certain object (let's say 20px), and I want the text in the object to start and pixel 4px, I can use padding-left:4px; This is no problem in Internet explorer, but Firefox seems to make this object 4px wider. Instead of keeping the object 20 pixels, it becomes 24 pixels. Does anybody know how to get of this bug in Firefox? Hi all, Been playing about with some CSS for a simple e-comm site. Mockup here. There seems to be a few issues though between IE/FF. Thats all I've been able to test on so far though. The site validates properly as far as I can tell so that doesn't seem to be a problem. In Firefox, the left hand bottom sidebox overflows the page (the footer doesn't go below it). In IE it seems to be fine. In IE, the padding on the right hand side of the main content header box is not the same as the left side. Also, the main left bullet list is royally arsed up. At the moment, I can't spot any more issues than that. As I continue development and start to add more features, then I will probably crop up with more issues. The HTML for the site is here. The CSS for the site is here. Suggestions on how to fix it would be much appreciated. Cheers, Computer So I'm working on a new css-based design for my site and everything looks great.. until I open it in IE. I'm using rounded corners in 2 div boxes placed both on the top and bottom of my <div> body, they are both positioned correctly. The rounded images are used as background images in the <div>'s and not as an <img>. Problem #1: There is either a margin or padding that is separating the first and second <div> containers that make up the top and bottom rounded corners. I've tried *{margin..padding:0} to eliminate it from all elements (to no avail). Problem #2: I've set each <div> container used for the rounded corners to 12x12px, because that is the size of the image (rounded corner image). For some reason, in IE both containers are bigger than 12px in height, no idea why this is. In Firefox everything is working as it should, anyway here is the.. HTML: Code: <html> <head> <title>P_TITLE</title> <link href="skin.css" rel="stylesheet" type="text/css"> </head> <body> <div id="tlcorner"></div><div id="trcorner"></div> <div id="divbody"> <div style="float:left;width:75%"><div id="logindiv"></div><br><div id="searchdiv"></div></div><div id="logo">logo..</div> </div> <div id="blcorner"></div><div id="brcorner"></div> </body> </html> CSS: Code: html {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background-color: #CFCFCF;
margin: 3px;
padding: 0;
}
#logindiv {
background-color: #FFF000;
float: left;
width: 100%;
height: 120px;
}
#searchdiv {
background-color: orange;
float: left;
width: 100%;
height: 35px;
}
#logo {
background-color: #000000;
float: right;
width: 155px;
height: 155px;
}
#divbody {
background-color: #FFFAF0;
height: 700px;
padding-left: 12px;
padding-right: 12px;
}
#tlcorner {
background-color: #FFFAF0;
background-image: url(images/tl_corner.gif);
background-repeat: no-repeat;
background-position: top left;
float:left;
width: 12px;
height: 12px;
margin:0px;
}
#trcorner {
background-color: #FFFAF0;
background-image:url(images/tr_corner.gif);
background-repeat: no-repeat;
background-position: top right;
height:12px;
}
#blcorner {
background-color: #FFFAF0;
background-image: url(images/bl_corner.gif);
background-repeat: no-repeat;
background-position: bottom left;
float:left;
width: 12px;
height: 12px;
}
#brcorner {
background-color: #FF0000;
background-image:url(images/br_corner.gif);
background-repeat: no-repeat;
background-position: bottom right;
height: 12px;
}
I'm sure if you use any image that is 12x12 you should see the same problems I am getting. Notice the padding or margin on the top left <div> element, and the incorrect height for both. Thank you very much for any suggestions. I have been trying to write a horizontal CSS nav menu for my website thinkmarriage.org/catalog/ based on some code I found. The menu seems to work great, except: 1. it is adding what looks like 30ish pixels of padding on the left side of the menu. I have tested in FF, IE, and Safari, all do the same thing. The code is CSS 2.1 validated. The link to my sample is: thinkmarriage.org/menu2.html 2. When I add the menu into my actual store, in FF it works, but IE turns the horizontal nav into vertical drop boxes. I was pretty sure the style sheets were conflicting with one another, but now the bar is working in FF, and I can't seem to find any problems. The two style sheets are : #1 (for the menu) : thinkmarriage.org/catalog/menustyle.css and #2 (for the site) : thinkmarriage.org/catalog/stylesheet.css The link to the site is above. If anyone has any thoughts as to where the extra padding is coming from or the conflict with the sheets in IE, I would greatly appreciate it. (Sorry, the rules won't permit me to place hyperlinks) |
|||||||