|
CSS - Defined Width + Padding, Browsers Behaving Differently
Hi
I have this small problem with one of my sites when viewed in IE *surprise surprise* Let's say I have a div called "foo". I specify a width and set a padding of 10px. Code:
<style>
.foo {
width: 100px;
padding: 10px;
}
</style>
<div class="foo">Bar</div>
Firefox, Opera and Mozilla interprets this as an element which's "text area" is 100px and there's an additional 10px on both sides. So the actual width of the div is 120px. IE doesn't interpret it like that. If I set widht=100px, then the actual width is 100px regardless if I have paddings or not. Now these different types of interprations are causing me a head ache. Is there any "trick" to make the div to be equally wide in all browsers? If not, I guess the only option is to use tables - Kimppa Similar TutorialsHello, I'm working on some really simple CSS and it's giving me wildly different results in Firefox and in IE. Here is the stylesheet: PHP Code: body { background-color: #DECFEF; } .example { background-image: url("images/example.gif"); border-width: thin; border-color: white; border-style: solid; padding: 35px 35px 35px 35px; } And here is the HTML file: PHP Code: <html> <head> <title>Chatterbox</title> <link rel="stylesheet" type="text/css" href="/teststyle.css"> </head> <body> <table class='example'><tr><td> hello </td></tr></table> </body> </html> All of this works (the image in the background, the white border, etc.) except the padding! In IE there is no padding at all, but in Firefox there is 35px padding, as specified in the stylesheet. You may see this yourself if you go to this URL in the two different browsers: http://www.chatterboxletters.com/test3.html Any help is greatly appreciated ~j. Hi, I'm having an interesting problem. I have a left floated containing div and then a right floated containing div to split multiple contents between the left and right side of a popup window. It works great in IE 7, Chrome, FF3, but for some reason not in FF2. In FF2, it forces the contents of the right floated containing div below the left floated div (instead of beside it) and makes it's width the entire width of the popup. Any idea why? (there is a reason I had to put all the css directly in the code - normally it's separated) Here's the code: Code:
<div style='padding: 15px; text-align: left;'>
<div style='float: left;'>
<table style='margin-top:16px; font-size: 12px; font-family: Verdana,Arial,sans-serif;'>
<tr>
<td>Name:</td><td colspan='2'><input id='popupName' name='popupName' style='float:left' type='text'></td>
</tr>
<tr>
<td style='padding:5px 0 17px 0;'>Type:</td><td style='padding:5px 0 17px 0;' colspan='2'><select id='popupType' name='popupType' style='float:left; width: 148px; height: 21px' ></select></td>
</tr>
<tr>
<td style='padding-bottom: 14px;' colspan='3'><div style='width: 280px'>This is some text.</div></td>
</tr>
<tr>
<td style='padding-bottom: 5px;'>Group Title:</td><td style='padding-bottom: 5px;'><input id='popupGroupTitle' name='popupGroupTitle' style='float:left' type='text'></td><td></td>
</tr>
<tr>
<td>Titles:</td><td><input id='popupTitles' name='popupTitles' style='float:left' type='text'></td><td><input style='float:left; padding: 0;' type='button' value='Add >>' onclick=\"addToList()\"></td>
</tr>
</table>
</div>
<div style='float: right;'>
<div style='margin-bottom:5px;'>Element Titles:</div>
<select id='newOptionSelect' style='float:right; width: 247px;' size='12'></select>
<input id='popupDeleteBtn' style=\"clear: right; background: rgb(190,190,190) url('/url') no-repeat center center; float:right; margin: 5px 2px;\" type='button' onclick='removeFromList(\"newOptionSelect\", newOptionArray)'/>
<input id='popupMoveDownBtn' style=\"float:right; background: rgb(190,190,190) url('/url') no-repeat center center; margin: 5px 2px;\" type='button' onclick='moveDown(\"newOptionSelect\", newOptionArray)'/>
<input id='popupMoveUpBtn' style=\"background: rgb(190,190,190) url('/url') no-repeat center center; float:right; margin: 5px 2px;\" type='button' onclick='moveUp(\"newOptionSelect\", newOptionArray)'/>
</div>
</div>
</div>
one line of text isn't in the position that i want it to be for ff and ie. Chrome is able to read the css code: chrome: Code: p1 {
line-height: 1.3em;
font-size: 1.2em;
font-weight: bold;
display: block;
-webkit-margin-befo 5.4em;
-webkit-margin-after: 1em;
-webkit-margin-start: 220px;
-webkit-margin-end: 0px;
}
ff,ie: p1{ line-height: 1.3em; font-size: 1.2em; font-weight: bold; } I want the " learning from questions" at the bottom right of the logo. Thanks for helping! site link: http://www.nyitforums.com/ I was playing around with the CSS on my blog to try and get the header alligned correctly. In Firefox I added both a bottom and top margin to the #logo to make it align correctly. the bottom margin figure was -45px;. When checking the site in Chrome there was still a large gap under the logo. So after a little trial and error it seemed that Chrome wanted -125px as the bottom margin figure to achieve my desired results. So I've left it at -125px but then back on Firefox the navmenu is now aligned wrong. Any ideas? **EDIT** I can't link to my site so you can see it as I'm a new user. Hello all, I'm trying to make a webpage that has about 200px padding on the left and right side and 0 padding at the top and bottom, i would like my content to be viewed in that small area. I'm wanting the background color where my content will be to be grey but i want the padded sides to stay white. Is this possible? Like this http://www.cssbasics.com/, you see how the sides are grey and the content area is in a different color, how can i do this? Thank you! Why do margin and padding widths act differently when applied to a floated item in Internet Explorer? Hi, I've searched various threads in this forum, even tried re-iterating the question in another similar post to no avail. How is it that in Firefox (1.0) I get overflow occuring on a nested div, yet in IE (6) I do not? i would like vertical scrollbars ONLY, if content is overflowing and not horizontal scrollbars-using a WC3 valid solution if possible. Thanks in advance A snippet of my css... PHP Code: /*css document*/ /* container div class*/ .outer{ width: 336px; height: 448px; border-color: #000000; border-width: 1px; border-style: solid; float: left; margin: 0 0 0 10px; background-color: #ffffff; /*background:url("../images/pg_curl.gif") top right no-repeat;*/ } /* inner-content div class*/ .inner { width: 298px; height: 388px; border-color: #000000; border-width: 1px; /*margin: 34px 0 0 19px;*/ margin: 2px 0px 0px 19px; font-size: 12px; /*line-height: 15px;*/ color: #000000; clear: both; /*scrollbars for content overflow*/ overflow:auto; } /* Example of problem: at the momment, in Firefox inserting this into the .inner classed div is creating horizonal overflow*/ .navigation { width: 298px; } .navigation ul { list-style: none; margin: 0; padding: 0; } .navigation li { border-bottom: 1px solid #ED9F9F; } .navigation li a:link, .navigation li a:visited { display: block; padding: 2px 2px 2px 0.5em; border-left: 10px solid #711515; border-right: 1px solid #711515; background-color: #B51032; color: #FFFFFF; text-decoration: none; } .navigation li a:hover { background-color: #711515; color: #FFFFFF; } .navigation ul ul { margin-left: 12px; } .navigation ul ul li { border-bottom: 1px solid #711515; margin:0; } .navigation ul ul a:link, .navigation ul ul a:visited { background-color: #ED9F9F; color: #711515; } .navigation ul ul a:hover { background-color: #711515; color: #FFFFFF; } I've been having a hard time with browser compatibility and I need a bit of help. This is what I'm trying to acheive. It's a link bar on top and then a page that contains left and right headers, dividers and content plus a footer (height is not an issue right now). I would like the #page to have a 2px border and every element inside to have a white 2px padding. It seems that in IE, if I set #page with a 2px padding, I get exactly what I want but Firefox does not interpret it the same way. Is there a hack/workaround for this. I've attacned a picture of what I'm trying to get at. Thanks 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=ISO-8859-1" />
<style type="text/css"><!--
html, body {
margin:0;
padding:0;
height:100%;
}
div {
margin:0;
padding:0;
}
div#holder {
margin:auto;
margin:auto;
width:800px;
height:100%;
background:black;
}
div#links {
width:auto;
height:30px;
background:pink;
}
div#page {
width:auto;
height:100%;
background:white;
border:2px black solid;
padding:2px;
}
div#left {
float:left;
background:red;
width:180px;
}
div#right {
float:right;
background:blue;
width:610px;
}
div#footer {
clear:both;
width:auto;
height:30px;
background:green;
}
--/></style>
</head>
<body>
<div id="holder">
<div id="links">1</div>
<div id="page">
<div id="header">
<div id="left">1</div>
<div id="right">1</div>
</div>
<div id="divider">
<div id="left">1</div>
<div id="right">1</div>
</div>
<div id="content">
<div id="left">1</div>
<div id="right">1</div>
</div>
<div id="footer">1</div>
</div>
</div>
</body>
</html>
The link to my page is: crowncontainer.com/dev/activity_test.php you'll have to post the www. in front, i'm a new user and can't post URL???? I have validated both the CSS and the XHTML. If you open in IE, the width starts out at 200px, which is what I've defined in CSS. If you open it in Firefox, it is wider and I don't know why? Also - when you click on the submit button, the program will return data in an AJAX call and the data will load in a div directly underneath the form. When the data is returned in IE, the width of the left nav will increase to the same width that displays in Firefox. Because of this, I have to believe that there is some buggy code that causes it to 'sort of' work in IE but not in Firefox? Can someone take a stab at this and help me? I want to keep my left nav width to 200px; Hi, I've been running into a specific issue in projects for months now, and it's beginning to drive me nuts. I'm sure there must be a way to do what I'm trying to do. The situation will usually be something like this: I'll have a vertical menu in list form. All of the menu items are to be 150 pixels wide with a background image, and that background image will change when the link is hovered over. The links themselves, though, are not all the same text and therefore not the same width. I cannot get CSS to implement a width to links, and when using CSS like the below, that's a necessity to get the same width background hover image on each link. CSS/HTML: css Code: Original - css Code <style type="text/css"> ul{} ul li{ background: url(someimage.gif) no-repeat #FFF; width: 150px; } ul li a:hover, ul li.active a:hover { background: url(someimage_over.gif) } </style> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Number Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Number Four (4)</a></li> </ul>
I hope that illustrates what I'm trying to get across, but maybe not. Basically, I need a way to use CSS to change the background of multiple areas of the same width within which the <a> sizes may not be the same. I'm having trouble explaining this. Let me know if you need it further explained.. otherwise, I'd greatly appreciate any input. Thanks in advance! hi, i was centering some divs thats 100% width with some padding on both sides, and position absolute it's like 3 layers...the background first is just black, second layer is gray with 10px margin on both sides...next layer has 10 more pixels margin... i see it doesnt work in FF but only IE and Opera...in FF the page gets bigger from the padding HOW can i center these div's instead, i tried without width and now they come very thin...maybe invisable... i also tried with position relative instead of abolute...then some other crazy things happen much respect for the people that helps me with this, its the last bit before my site is ready! I have a css problem with windows 2000 OS. Here's the CSS I have that creates the menu to the left. PHP Code: #nav{ float:left; clear:both; text-align:left; color:#FFFFFF; font-size:10px; height:177px; width:119px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 70px; background: url(http://www.moretanninglotion.com/images/backnav.gif) repeat-y; } The acutal size of the div is supposed to be 189px but the padding isn't getting factored into that when the browerser in windows 2000 renderes it. Does anyone have a hack or an idea of what to do? Below are screen shots of my page. http://www.browsercam.com/public.aspx?proj_id=180419 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? I'm looking to make a semi-elastic layout using max- and min-width to keep the main container from dropping below about 750px or stretching above about 950px. I'm hoping that this would allow the layout to work nicely for those with 800x600 displays (I really wish people would stop using 800x600!), stretch out a bit for those with 1024x768 displays and then not stretch out more so as to maintain a decent line length. I know that IE for Windows doesn't support max- and min-width and if these are the only browsers that don't I can use a suitable workaround. However, if there are other browsers that don't support max- and min-width, I'll run into some problems. If anyone knows of any modern browser (i.e. not NS 4.7!) that doesn't support these CSS properties, I'd really appreciate knowing about it. I'd also really appreciate it if people could comment either way - i.e. please also mention if you believe it is only IE that doesn't support these properties. Thanks in advance for any comments! 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, 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! 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 Anyone know how to fix the bottom bars width? Page he http://www.milztech.net/ Cheers! 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 almost finished with a site, but the buttons in the main navigation are behaving badly; when you put the mouse over them (only in IE of course..) they only activate when you are about 10 pixels away from the top of the page. Link- http://www.hamlettinstruments.com/beta/ can someone help me figure out why this is? Thanks, ad |
|||||||