|
CSS - How To Color Padding Differently.
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! Similar TutorialsHi 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 Why do margin and padding widths act differently when applied to a floated item in Internet Explorer? Hello, 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. 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? Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? If you look at my page here in IE and Firefox, you'll see that the footer is stretched in IE. It's barely showing the image, but flooding over into the center of the page. I have no idea why it'd be doing this. View in IE View in FF Here's the CSS used : Code: #footer {
background: #49515C url(img/header_right.gif) no-repeat 100%;
border-bottom: 5px solid #fff;
border-top: 10px solid #fff;
text-align: center;
color: #fff;
font-size: 0.8em;
padding: 10px;
line-height: 16px;
clear: both;
}
Can anyone see a problem? I had a similar problem earlier this week and it turned out to be solved by changing the encoding of my php files to ASCII instead of the default UTF-8 set by MS Expression Web. The problem I have now is that one of my pages looks wrong in IE7. The same page looks fine in IE8, FireFox 3, Chrome, Opera, and Safari. This is what it looks like in IE7: This is what it looks like in IE8 and all the other browsers mentioned above: The page can be seen he http://dev.asbco.com/products/commercialindustrial/ Any help is greatly appreciated! Thanks! Hi, I have an unordered list displaying contact info for several people. For example: name1 address1 phone1 name2 address2 phone2 name3 address3 phone3 I'd like there to be a blank line between each person's info (just like it is displayed above). To do this, I added line breaks after each list item's closing tag. Here is the code: Code: <ul> <li>name1<br />address1<br />phone1<br /></li><br /> <li>name2<br />address2<br />phone2<br /></li><br /> <li>name3<br />address3<br />phone3<br /></li><br /> </ul> In Safari and Firefox (Mac and Win) there is a blank line between each section of contact info (the desired effect). In IE6, there is no blank line. It looks like this: name1 address1 phone1 name2 address2 phone2 name3 address3 phone3 I'm sure there is a fix out there, I just haven't found it yet. Any help is appreciated. - Tim Ok so i initially put my CSS iwthin my HTML document as it was just going to be a test page. I then thought of expanding it into an actual site so wanted to transfer the CSS coding on and external CSS stylesheet. However when doing this the layers pull to the left and out of line .. any problem causing this? Also .. i know i have used position:absolute; tags, and using them is frowned upon when used on all layers. But without these, once again the layers again, are pulled to the left, any help would be fantastic. Regards, Joe. CSS within the XHTML document: Code: <style type="text/css">
<!--
body {
margin: -10px;
/*/*/margin: 0; /* */
padding: 0;
color: black;
background: white;
background-image: url(images/bg%20copy.png);
}
#content {
position:absolute;
width:200px;
height:78px;
z-index:1;
left: 112px;
top: 0px;
}
#nav {
position:absolute;
border:#000000;
border-width:thin;
width:142px;
height:320px;
z-index:2;
left: 123px;
top: 109px;
}
.style {
background:#A01B1E none repeat scroll 0%;
border:1px solid #000000;
}
#aff {
position:absolute;
width:137px;
height:29px;
z-index:3;
left: 123px;
top: 553px;
}
.style1 {font-size: 12px}
#news1 {
position:absolute;
width:200px;
height:43px;
z-index:4;
left: 307px;
top: 108px;
}
#news2 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 307px;
top: 278px;
}
#xtreme {
position:absolute;
width:27px;
height:38px;
z-index:6;
left: 860px;
top: 15px;
}
-->
</style>
I have two images, the first (nameplate) i have set to be ontop and centered, whose left side "hits" the side of the window when the window gets small enough like its supposed to. The second is set beneath it (silverplate) and is smaller than nameplate(1500x800). I want this to be centered too so that when the browser is resized it follows the nameplate and doesnt move against it or go out of window. I cant seem to achieve this effect with any combination of positioning and nested divs, the silverplate always goes off the left side of the window and tracks different than the nameplate. Why dont both images behave the same? How would i make them do that? Code: <style>
#nameplate {
top:0px;
height:1500px;
z-index:90;
height:1500px;
overflow:visible;
}
.img {
position:relative;
display:inherit;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body bgcolor="#00FF33" style="margin:0px; padding:0px; max-height:1500px; overflow:visible;">
<div id="nameplate">
<img src="Assets/NamePlate.png" style=" z-index:98; opacity:0.5;" class="img" />
<img src="Assets/SilverPlate.png" style="z-index:95; left:-300px; top: -1000px; width:100px; height:100px;" class="img"/>
</div>
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. http://www.lovemeforme.org/alecia/ I've made it so it works perfect in FF, IE, Netscape.. but in Opera it's messed up. Is there anyway I can specialize a stylesheet for just Opera? Also, anyone know of any free services that provide screen shots for all common web browsers. I remember I had a link a while ago, but I've since lost it. Thanks for the help in advance. Hi there, I have some CSS tabs, but they are displaying differently in IE7 than FF. This is my code: PHP Code: #nav { float:left; width:100%; background:yellow; height: 27px; font-size:93%; line-height:normal; list-style: none; margin: 0px; } #nav li { float:left; background:url("images/tab_left.jpg") no-repeat left top; margin:0; padding:0px; list-style: none; } #nav a, #navheader strong, #nav span { display:block; background:url("images/tab_right.jpg") no-repeat right top; padding:5px 15px 4px 6px; } and my html: PHP Code: <div id="nav"> <ul> <li><a href="#">Home</a></li> <li id="current"><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> Any ideas whats causing these different outcomes? Well I'm pretty uneducated in CSS, I have just played around with it hours and hours and always figured out what I was trying to do. But right now I am stumped. Please view the following page in FireFox if you have it: http://www.iqdrop.com/newiq/index.php Then in IE You see the Google ad is dropped way down in IE for some reason and overlaps my menu, and the <DIV> containing the word "index.php" is also taller in IE. I'm not sure what is wrong and I've been trying all sorts of things with no luck. Thanks for any help. Hi, I have an issue with Vertical menu contained in Re-sizable DIV. This menu appears differently in IE vs Firefox (Please refer attached Image) http://img402.imageshack.us/img402/7830/resize.png URL Attached Image Following is the Code for the Style class mentioned in the image Code:
.cwc_navMenuLabel {
line-height:14px;
vertical-align:top;
white-space:nowrap;
}
.AccButton{
float: right;
align:right;
text-align: right;
position: relative;
top: -1px;
z-index: 10;
width: 16px;
margin:0 5px 0 0;
}
/*USE THIS FOR IE*/
.AccLiIE {
display: inline;
background-color: #A2C2E4;
background-image: url(../../images/acordion_backgr.png);
background-repeat: repeat-x;
border-top: 1px solid #7591AC;
height: 19px;
white-space: nowrap;
}
/*USE THIS FOR NON-IE BROWSER*/
.AccLi {
background-color: #A2C2E4;
background-image: url(../../images/acordion_backgr.png);
background-repeat: repeat-x;
border-top: 1px solid #7591AC;
white-space: nowrap;
}
Please let me know the change that i have to do in CSS to make the menu appear in IE the way it looks in Firefox. Thanks and appreciate your help i have a two div tags but the upermost tag sits outside the boundary of the one below and the page seems to be over stretched in IE7 the page address is www.ftpimage.com does anyone have any suggestions my css is as follows Code: body {
margin: 0px;
background: url(../img/top_bg.gif);
background-repeat: repeat-x;
font-family: Verdana, Arial, sans-serif;
font-size: "15";
}
p {
line-height: 50px;
margin: 11px 0 10px 0;
padding: 0px;
}
h2 {
color: #9f9f9f;
margin:0px;
padding:0px;
font-size: 15px;
}
ul {
font-size: 10px;
margin:0;
padding:0;
list-style-image: url(../img/bullet.gif);
}
a {
color: #93B300;
}
a:hover {
text-decoration: none;
}
blockquote{
background: #F7FDE3;
color: #606060;
padding: 0px;
}
/**** Main Container ***/
#wrap {
margin-left: 10px;
margin-right: auto;
width: 640px;
}
/**** Top ***/
#top {
width: 155%;
height:85px;
color: #fff;
background: #000 url(../img/top_bg.gif);
overflow:hidden;
}
#top h2
{
color: #87CEFA;
letter-spacing: 3px;
font-size: 2.4em;
font-weight: normal;
position: relative;
margin: 0px;
top: 33px;
display: block;
float: left;
background: url(../img/bg_t.gif) no-repeat;
padding-left: 8px;
}
#top h2 a {
color: white;
text-decoration: none;
}
#top h2 a:hover {
color: #93B300;
}
#page
{
margin-right: 20px;
max-width: 10px
}
/**** Main Menu ***/
#menu {
display: block;
float:right;
}
#menu ul {
margin: 0;
list-style: none;
}
#menu li {
display: block;
float: left;
white-space: nowrap;
}
#menu li a {
display: block;
padding: 20px 10px 12px 20px;
text-decoration: none;
color: #fff;
font-weight: bold;
}
* html #menu a {width:1%;}
#menu li a:hover {
background: url(../img/bg_menu.gif);
}
#menu li a.current {
letter-spacing: 1px;
color: gray;
background: url(../img/bg_menu.gif);
}
#menu li a.current:hover {
color: #fff;
}
/**** Content Container ***/
#content {
width: 65%;
margin-top:30px;
border: solid 2px black;
}
#content h2 {
margin: 0;
padding: 10px 0 10px 0;
}
/**** Content ***/
#left ul {
padding: 15px 0 15px 35px;
margin:0;
}
#left li {
margin-bottom:5px;
}
#left .box {
width: 390px;
float:left;
display: block;
margin-left: 20px;
display: inline;
}
/**** Sidebar ***/
#right {
width: 315px;
float: right;
display:block;
margin-top: 10px;
}
#right .box {
width: 20em;/*280px*/
background: #87CEFA;
border: 1px solid #E1E1E1;
padding:10px 10px 55px 10px;
float: right;
}
#right .box h2 {
font-size: 3.1em;
margin: 0px 0 0px 0;
padding:0px 0 5px 0;
}
#right .box a {
margin: 10px 0 10px 0;
color: #93B300;
font-size: 20px;
}
#right .box p {
margin: 5px 0 10px 0;
line-height: 15px;
}
#right .box ul {
padding: 0 0 0px 20px;
margin:10px 0 10px 0;
}
#right .box li {
margin-top:5px;
}
html>body .box
{
width: auto;
min-width: 20em;
}
#nav{ list-style: none; margin: 2.0em 0; width: 25em; float: right;}
#nav li{ padding: 0; margin: 0; }
#nav a{
display: block;
height: 2.0em;
padding: 0.3em 0.3em 0.3em 0.8em;
border:solid;
border-width:medium;
border-bottom: 2px; /*solid #1a1a1a*/
border-top: 2px; /*solid #1a1a1a*/
border-color:Black;
color: black;
background-color: #87CEFA;
font-weight: bold;
text-decoration: none;
font-size:medium
}
#nav a:hover{
color: #1a1a1a;
background: url(../img/bg_t.gif) no-repeat;
background-color: #fff;
font-weight: bold;
}
/**** Clear Div ***/
#clear {
display: block;
clear: both;
width: 100%;
height:1px;
overflow:hidden;
}
/**** Footer ***/
#footer {
margin: 40px auto 0 auto;
text-align: center;
border-top: dotted 1px gray;
padding: 20px 0 20px 0;
width: 70%;
}
#footer p {
margin: 0px;
padding: 0;
I am working on a development site (http://dev.asbco.com/products/commercialindustrial/ ) and I am getting different looks in Safari and Chrome. IE8/FireFox 3/Opera all render the page correctly, Safari and Chrome are off. Any ideas how to fix this issue? Thanks! [EDIT] I meant Safari and Chrome not Safari and FireFox 3. I've been working some more on a new layout for one of my websites this weekend. However, I'm having trouble getting the layout to display the same in all browsers. Everything is looking exactly how I hoped in Firefox, but when the same page is viewed in Internet Explorer, some things appear rather differently. Sample Page: http://www.mybb-emods.com/new/index.htm CSS File: http://www.mybb-emods.com/new/stylesheet.css Firstly, the background of the navigation bar at the top of the page should remain grey at all times apart from when a link is hovered, in which case it changes to blue. This is happening in both browsers, but in Internet explorer, only part of the background is changing as opposed to all of it. It's easier to show this than to explain, so I've posted two screenshots below to demonstrate. The first screenshot shows the navigation bar in Firefox, the second shows the same bar in Internet Explorer. I'm assuming this is probably something to do with the padding values I have assigned, but I have been unable to find a working solution for all browsers. Also, I'm having a problem with the left margin of my main page content. The margins down the left side of the main page should all be 20px from the left hand border, and this shows correctly again in Firefox. However, in Internet Explorer, the left margin of the navigation bar appears correctly, but the content beneath it appears to have a much larger margin and as such the layout appears incorrectly. If anyone has any idea how to fix these problems then I would very much appreciate the advice. Thanks. 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>
|
|||||||