|
CSS - Ie And Padding Problems
I have a beautiful looking site when viewed in Firefox but I am having some problems with Internet Explorer (surprise, surprise!)
http://cbo4edu.org/newSite/index.html I want the Headings, OUR MISSION and CBO NEWS to be lined up just below the navigation div. In Firefox, my CSS and padding renders perfectly, with the background on OUR MISSION blending in with the navigation div's bottom border. In IE, these headings are mostly hidden behind the navigation div. How can I adjust my CSS for IE without disturbing the Firefox version? Similar TutorialsHi, beeing fairly new to CSS I am having a hard time solving this issue, hopefully it has a simple solution which someone might help me with. Here goes, In IE this page aligns nicely at the top of the browser window just like I want it to, but in FF and Opera the whole page is moved down maybe 5px or so, the code is pasted below. Also, it seems to me that IE stacks the layers tighter, bordder to border, than FF and Opera which seems to add padding or margin to the layers. I am probably way off but I would be extremely happy for any help. 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" lang="en">
<head>
<style type="text/css">
html{
margin:0px;
padding:0px;
}
body {
background: #FFF;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:62.5%;
text-align:center; /*fix for centering the content div for IE 5.5*/
}
#content {
width:748px;
margin:0px auto;
padding:0px;
text-align:left; /*IE 5.5 alignment fix*/
}
#tipsHeader{
height:113px;
background:#FFF url(images/Logo.gif) no-repeat top left;
margin:0px;
padding:0px;
}
#tipsHeader h1 span {
display:none;
margin:0px;
padding:0px;
}
#bigProdDisplay{
width:448px;
height:298px;
text-align:left;
float: left;
}
#productSlogan{
width:300px;
height:298px;
background: #FFF url(images/squareHeaderParotid.gif) no-repeat top left;
margin:0px;
padding:0px;
text-align:right;
float: right;
}
#productSlogan h3 span {
display:none;
}
/*==========NAV STYLES============*/
#navcontainer{
margin-bottom:25px;
}
#navcontainer ul
{
padding-left: 0px;
margin-left: 0px;
background-color: #fff;
float: left;
width: 100%;
font-family: Verdana, arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1.2em;
background-color: #fff;
color: #4E5C8D;
text-decoration: none;
float: left;
font-size: 1.2em;
font-weight: normal;
}
#navcontainer ul li a:hover
{
background-color: #fff;
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
#home #navlist-home a,
#advantages #navlist-advantages a,
{
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
#home #navlist-home a:hover,
#advantages #navlist-advantages a:hover,
{
text-decoration: none;
}
#navlist a:active {
color: #333;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
/*======END NAV STYLES======*/
</style>
</head>
<body id="home">
<div id="content">
<div id="tipsHeader"><h1><span>Header text</span></h1></div>
<div id="bigProdDisplay"><img src="images/BigSmall.jpg" alt="" /></div>
<div id="productSlogan"><h3><span>mighty slogan hides behind image</span></h3></div>
<div id="navcontainer">
<ul id="navlist">
<li id="navlist-home"><a href="#">HOME</a></li>
<li id="navlist-advantages"><a href="#">ADVANTAGES</a></li>
<li id="navlist-application"><a href="#">APPLICATION</a></li>
<li id="navlist-conventions"><a href="#">CONVENTIONS</a></li>
<li id="navlist-contact"><a href="#">CONTACT US</a></li>
<li id="navlist-references"><a href="#">REFERENCES</a></li>
</ul>
</div>
</div>
</body>
</html>
I am creating a web page using CSS, and having a hard time with IE vs Netscape. IE ignores padding in defining width, and Netscape includes it. So, my page design is correct in one browser or the other. Does anyone know a way around this problem? Hi, The site I'm developing is: http://www.jaysonsgroup.com/index2.html It's only a temporary page..some old <table> tags are in there..which don't validate as XHTML. But, I come across many IE 5.0 - related problems for many of my sites..i.e. even those that validate under W3C etc. So I'm just asking generally, does anyone know a site that has fixes for IE 5.0 bugs? My sites seem to be fine on most browsers except this one. In regard to the above link, I had some major problems with IE 5.0 on the middle area (i.e. the images & text under "news" and "login"). The basic HTML code for that: Code: <div class="outerblock"> <div class="news"> <div class="news_left"><div class="news_left_text">My text</div></div> <div class="news_mid"><img src='images/sinhala.gif' width='431' height='286' alt='' /></div> </div> <div class="login_right"> my login table </div> </div> and the CSS for that: Code:
.outerblock {
width: 100%;
overflow:hidden;
display: block;
clear: both;
}
.news {
width: 607px;
overflow:hidden;
float: left;
border-right: 1px solid #C5C5DD;
}
.news_left {
width: 163px;
float: left;
overflow:auto;
display: block;
background: url(../images/home_worldwide.gif) no-repeat;
padding: 110px 0px 0px 0px;
}
.news_left_text {
padding: 0px 0px 0px 5px;
color: #3B537D;
font-family: Verdana, Arial ;
font-size:7.5pt ;
font-weight:normal;
line-height: 13px;
}
.news_mid {
width: 440px;
height: 300px;
float: left;
overflow:hidden;
}
.login_right {
width: 160px;
height: 250px;
padding: 50px 0px 0px 0px;
float: left;
background: #ECEDF2;
border-right: 1px solid #C5C5DD;
border-left: 2px solid #FFFFFF;
overflow: hidden;
}
One problem I had (on IE 5.0) was that the middle 'news_mid' image was overflowing, positioned just below the 'news_left' area. The widths etc are all correct because the container width is 771px. So the entire area should just fit and not overflow (even though in IE 5.0 it did). The 'news' overflow property was AUTO, and I fixed the problem by specifying the overflow:hidden. Likewise, the 'login_right' div was overflowing just below the entire news section, and not to the right as it should have been. Once again I fixed this by specifying overflow:hidden for the outer div. Is it common to use overflow:hidden for things like this? Or is there a more appropriate fix? Another small problem I noticed for IE 5.0 : http://www.jaysonsgroup.com/ie5win.jpg (screenshot). The login_right background does not extend all the way. The height of the div should be 250 pixels + 50pixels on the padding - so 300 pixels total. But IE 5.0 ignores the 50pixels padding and leaves the background with a height of 250px. Thanks very much in advance! Hi all, I have a horizontal navbar using the old favourite ul/li html list with css doing the layout. Problem is that there is a difference of display between firefox and ie7. The li tag css is Code:
li{
background:url('../images/li_bg.gif') repeat-x #ff0000;
display:inline;
padding:0 5px 0 5px;
margin:0 2px 0 0;
}
List html is: Code: <ul> <li><a href="member.php">Home</a></li> <li><a href="profile.php">Profile</a></li> <li><a href="help.php">Help</a></li> <li><a href="logout.php">Logout</a></li> </ul> I reset margin and padding for all other tags in a general css file. The image is a 1px width gradient. Looks fine on ie7 but firefox seems to add an extra 2 or 3 pixels of margin. Used firebug to try and track down the extra but it highlights only the margin and padding I have specified and doesn't give any clues to the additional space. Have seen plenty of navbar tutorials but not with margin between list elements. Any help is much appreciated... Hello again. Or should I say ( Time on my watch is 22:17 and because of time zones (+7 for US) ) good morning ? If go to the: http://www.odin.foxnet.pl/archives.html and expand these 2 menus : Navigation and Other - You will see my problem, and it was working before, now it looks, just like you can see. Second problem: solved And at the ending: Fileds for name and mail for comment wasn't so bad as now. Just look at it (2 eg: http://www.odin.foxnet.pl/2005/09/14/Tales/mj-przyszy-bokken.html http://www.odin.foxnet.pl/2005/09/15/Home/userfriendly-url.html ) Goodnight everyone. You are great people, offering great help. milosz-odin - known from this weigher Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey Hey everyone, I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something. html4strict Code: Original - html4strict 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=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I validated it and it validates fine, any suggestions? I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
Hey everyone, I am working on a new template: http://4xp.net/temp.html The colors are there just so I can see the divs, so don't worry. If you look at the page in IE, it looks fine, with some padding between the green and orange div, and to the right of the orange div. When you look at it in Firefox, there is a bunch of white padding to the top and bottom of both the orange and green divs, and I can't seem to get it to go away. The weird thing is, if I add a 1px border to the orange div, the green div aligns to the top, and the orange background expands to fill in the white area above and below the orange div. Does anyone know how to remove this padding? Thanks! I am noticing that padding changes the width/height of an object. For example, if I have a div element with a width of 100% and padding at 10px, it will actually cause the horizontal scrollbar on the browser to appear because it takes the 100% width into account, plus 20px for the padding on the left and right side. I thought padding was suppose to push elements inward. ??? Any help will be greatly appriciated. Right now, there is nothing about padding located in css file. And I was told I should add a bit because my page is a headache to read. I was told: "Basically you want to add more white space between the vertical line and the text" How would I go about doing this? The site Im talking about is: www.ohiocichlids.com Hi there, I have 2 main divs.. one which holds a small ammount of content on the right hand side.. like a 'related links' box which is located at the top right of the page. The other div holds the content. It wraps around the top right div, but there is no padding to the right of the content area, so the text goes right the way up to the right hand div. How can I add some padding to the right of this area? I have added padding, but it adds it to the text where it wraps below the top right div. This is the code I am using: PHP Code: #related_links{ width: 165px; height: 237px; background-image: url('images/related_bg.jpg'); background-repeat: no-repeat; float:right; padding-right: 10px; } #related_inside{ padding: 10px; } #content{ padding-right: 10px; } #content_inside{ padding: 10px; } PHP Code: <div id="related_links"><div id="related_inside">right hand text</div></div> <div id="content"> <div id="content_inside" >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div></div> Around this dropdown image? http://199.134.225.62/NW_PORTAL/sliding_menu/sliding_menu.cfm I have padding and margins all set to 0... I don't know exactly what to call what's going on, but i'm asuming that there is a padding issue with my menu. I have a ul that contains my menu list. The CSS and xhtml are as follows: Code: /* Menu */
li {
border: 1px solid #000000;
border-bottom: 0px none;
display: inline;
line-height: 14px;
margin: 0px;
margin-left: 1px;
margin-right: 1px;
padding: 0px;
padding-left: 3px;
padding-right: 3px;
}
ul#menu {
background-image: url(img/menu.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
list-style-position: inside;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
background-position: left bottom;
vertical-align: text-bottom;
}
/* End Menu */
<ul id="menu"><li>Menu 1</li><li>Items 2</li>
<li>Will 3</li><li>Go 4</li><li>Here 5</li></ul>
(the menu is on one line, thanks to IE's whitespace issue, i broke it here for easier readablity.) the problem is: i have it nestled on top of a div, and for some reason the ul has a 1px bit of padding on the bottom. I have searched the forum and may have missed some one posting a resolution for this, but i tried every one ov the voice-family/carrage return fixes i've seen, but none work. to see what i'm talking about if my words are il formed (as they often are) click here. to view the CSS click here. I'm having some troubles getting my div to appear correctly. WHat I want is for the div to be completely contained by a FLASH movie with no whitespace. In Firefox I'm getting an approximately 5px tall white bar at the top. TWH is the url, the flash movie only appears on the main page. My container div uses a background image with a greenish colored 200px left edge, and then a white edge to fill the rest. I know this is what's coming through, but what baffles me is that even when specifying a background color for my div it's not coming through. Here is some of the code: CSS: Code:
#container {
width: 760px;
height: auto;
margin: 0 auto;
text-align: center;
overflow: auto;
background: url('../images/style/container_back.jpg') repeat-y;
border-bottom: 20px solid #6e868f;
}
#lcol {
width: 200px;
height: 380px;
float: left;
text-align: left;
}
#nav {
height: auto;
background-color: #000000;
width: 100%;
text-align: center;
}
#nav ul
{
list-style: none;
padding: 20px 0px;
margin: 0px;
}
#nav ul li
{
padding: 7px;
}
#info {
height: auto;
width: 190px;
text-align: center;
padding: 5px;
font-size: 11px;
}
#flashcontent
{
width: 560px;
height: 380px;
padding: 0;
margin: 0;
float: right;
}
HTML -- I've taken the content out so that the structure is more clear. Code:
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="quote"></div>
</div>
<div id="lcol">
<div id="nav"></div>
<div id="info"></div>
</div><!--lcol-->
<div id="flashcontent">
FLASH player is required to view portions of this site.<br /><br />
<a href="http://www.macromedia.com/go/getflashplayer" target="_blank">
<img src="images/logos/get_flash_player.gif" alt="FLASH player" height="31" width="88" /></a>
</div>
<script type="text/javascript">
var so = new SWFObject("slideshow.swf", "gallery", "560", "380", "6", "#6e868f");
so.write("flashcontent");
</script>
</div><!-- end container --><br />
Hi! Is it a good idea to always use padding and never margin (span, divs, etc.)? or would a combination between margin and padding be better? P.S. In some places I must use padding... in the others I use margin but could use padding instead... wouldn't it be more consistent to always use padding? Thank you Hi, everyone. Funny I've never run into this before, but I've got a div with a background colour applied, and within it there's an image I want to appear snug to the top, right where the bgcolour starts. Here's the html/css: Code: <TD style='vertical-align:top; text-align:left;'> <div style='background-color:#DA1B28; padding:0px; vertical-align:top; color:white; height:19px; width:385px; margin-left:20px; margin-top:8px;'> <a href='blah.html' style='margin-top:0px;'><img src='images/viewcart.gif' border='0' alt='View Cart!' style='margin-left: 4px; margin-top:0px;'></a> </div> </TD> </TD> I'm getting a bout 2px of space before the image starts; is the only way around this to use a negative margin-top, or am I missing some parameter in one of the styles? Thanks in advance! Hello, I just took a look at my site in IE7. I know the coding is far from pure, but it's still simple, and I didn't expect any problems. It looks fine in Firefox and Safari. Is style="padding-right:15px" not allowed in an img tag? Why does the mouseover effect in the menu not work? Code: #sidebar {
margin: 0 0 0 0;
width: 160px;
}
#sidebar .menu {
list-style: none;
margin: 0 0 0 0;
padding: 0;
width: 150px;
border-bottom: 1px solid #e8e8e8;
}
#sidebar .menu li {
border-top: 1px solid #e8e8e8;
color: #999;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
padding: 2 0 2 10;
width: 150px;
}
#sidebar .menu li:hover {
background-color: #f8f8f8;
}
#sidebar .menu li a {
color: #2E86D0;
display: block;
padding: 0px;
text-decoration: none;
width: 140px;
}
#sidebar .menu li.active:hover {
background-color: #e8e8e8;
}
THANKS for the help! Resolved. Shoddy layout from a so called web developer . ========================================= Hi. Could anyone advise me on the following issue: The following URL, links to a page with an image (boat) in the second content column. The image is 200px wide and the column is 235px wide with a left and right padding of 15px. Bluestone development The column is controled by the following style: td.datacolumntwo { padding: 0px 15px 10px 15px; } The issue I have is that the image causes the column padding to kick out. I have used hspace (out of curiosity) settings to no avail. I get the padding levels back only by cutting the width of the image to nearly a quarter. Any advice would be much appreciated. Eddie |
|||||||