|
CSS - Padding Not Working Correctly
I uploaded the page I am working on to http://sulley.dm.ucf.edu/~ebuccianti/wtf/.
I want that text at the top of the page to begin a certain number of pixels down from the top of the div, so I tried to set padding-top to that number of pixels, but for some reason Firefox is extending the bottom of the div by that number of pixels as well. I have done this before and I have never had this problem. What the hell am I doing wrong this time?? Download the page he http://sulley.dm.ucf.edu/~ebuccianti/wtf/index.php Download the stylesheet he http://sulley.dm.ucf.edu/~ebuccianti/wtf/style.css Please help! Similar TutorialsI can hardly believe my eyes. Maybe I'm doing something wrong... I have a div with 5px borders and 5px padding on each side. My php does a browser detect, and pulls the appropriate css file. In the IE stylesheet, I have the div's width set to 820px (800px + 5px + 5px +5px + 5px = 820px) as described as part of the Tan Box Hack (which wasn't working right for some reason). In the Mozilla stylesheet, I have the width set to 800px, because, well, that's how wide it's supposed to be. Now, when I open IE6 and Firefox, and send them both to the page, IE renders the box somewhat larger than the box in FF. What's even stranger is, when I set the width in the IE stylesheet to 800px, it renders correctly, matching the width rendered by FF. Any thoughts on this? I can post my code if you really wanna see it, but I figured you'd all understand what I'm trying to describe... Hello. I have created a form for Member Login and added padding for the username and password input text (so it displays centred vertically and a offset from the left edge). If looking at it with Firefox it works and looks perfect, I open it inside IE 8 and the padding is removed. What am I missing? This line is governing my inputs: Code: .twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin input{
http://www.nessphysiotherapy.com/testing/testing.php Form Elements: Code:
<div id="popupbox"> <!--Start login box-->
<form name="login" action="" method="post" id="formlogin">
<div class="mainloginrow">
<input name="username" class="fielduser" size="14" maxlength="25"/>
<img src="../images/login_register.png" border="0" usemap="#register"/>
<map name="register" id="register">
<area shape="rect" coords="27,10,95,29" href="" />
</map>
</div>
<div class="mainloginrow">
<input name="password" type="password" class="fieldpass" size="14" maxlength="30" />
<img src="../images/login_forgot.png" border="0" usemap="#forgotpass" />
<map name="forgotpass" id="forgotpass">
<area shape="rect" coords="33,7,87,23" href="" />
</map>
</div>
<input name="submit" type="submit" class="submitlogin" value="" />
<input name="Button" type="button" class="closelogin" value="" onClick="loginclose(this.form)" />
<map name="forgot_pass" id="forgot_pass">
<area shape="rect" coords="41,36,113,76" href="" />
</map>
</form>
<br />
<!--<center><a href="javascript:login('hide');" class="alogin">close</a></center>--> <!-- Closes the box-->
</div> <!--End login box-->
CSS: Code:
<style type="text/css">
/* Personal add-ons */
#loginmain {
margin: 0 auto 0 0;
width: 412px;
}
#popupbox{
margin: 0;
margin-left: 10%; /* This gets it relatively center on the screen */
margin-right: 30%; /* This gets it relatively center on the screen */
margin-top: 50px; /* Makes it a little off the top of the screen */
/*padding-top: 10px; /* Make the text not touching the top on the login box */
padding:0px;
width:420px;
/*width: 20%; /* For centering it on the screen */
height: 280px; /* The height of the login box */
position: absolute; /* Makes sure its absolute so it doesn't dock with everything else */
/*background: #FBFBF0; /* Login Box background color. Change this if desired. */
background-image:url(../images/loginimage.png);
background-repeat:no-repeat;
/*border: solid #000000 2px; /* Makes a black border around the login box */
z-index: 9; /* Makes it on top of everything else */
font-family: arial; /* Sets the font */
visibility: hidden; /* Makes it hidden at first. Very Important.*/
}
.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin {
position:relative;
padding:0px;
margin-bottom:0px;
margin-top:132px;
margin-left:71px;
height:148px;
}
.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin input{
position:inherit;
width:210px;
height:30px;
background-image:url(../images/login_field_username.png);
background-repeat:no-repeat;
border:none;
magin:0px;
padding-bottom:0px;
padding-left:10px;
padding-right:0px;
padding-top:0px;
font-size:12px;
}
.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin .fielduser {
margin-bottom:23px;
margin-right:0px;
}
.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin .fieldpass {
margin-bottom:13px;
margin-right:0px;
}
.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin .submitlogin {
position:relative;
background-image:url(../images/login_now_stand.png);
background-repeat:no-repeat;
width:125px;
height:45px;
padding:0px;
margin-top:0px;
margin-left:13px;
margin-right:5px;
margin-bottom:0px;
border:none;
}
.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin .closelogin {
position:relative;
background-image:url(../images/login_now_close.png);
background-repeat:no-repeat;
width:125px;
height:45px;
padding:0px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
border:none;
}
#popupbox .alogin {
position:relative;
width:100%;
height:15px;
padding:0px;
margin-top:11.5px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
}
.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin img {
position:absolute;
margin: 0px;
padding: 0px;
height: 30px;
width: 116px;
}
</style>
Hello everyone, Thanks in advance for any help you can offer. I have a single page for a site I'm creating located he simplethoughts.com/test/index.html The css file for the page is located he simplethoughts.com/test/css/screen.css The main navigation is using suckerfish style dropdowns which work fine in IE7, firefox, and opera. However, when I try the page in IE6 or 5.5, the dropdowns 'drop' about 100px too low and WAY to the right of where they're supposed to and I can't seem to figure out why. Thanks again for any help...it's extremely appreciated! -Neil Maybe I'm just missing something here, but I can't get the right column of the search box to align at the top. At first I thought it had something to do with the specified widths, but that did not work. I'm sure this is a quick fix, I can't seem to figure it out though. Thanks. The site Code:
<div id="searchbox">
<h2 id="searchbox_header">Browse Bus Rates and Amenities</h2>
<p style="padding-left: 5px; ">Search by Bus Type:<br />
<select name="bustype">
<option selected value="">All Bus Types</option>
<option value="1" >Deluxe Motor Coach</option>
<option value="7" >Double Decker</option>
<option value="4" >Entertainer</option>
<option value="5" >Executive</option>
<option value="9" >Limo Bus</option>
<option value="2" >Minibus</option>
<option value="3" >School Bus</option>
<option value="0" >Tour Operator</option>
<option value="6" >Trolley</option>
<option value="8" >Van</option>
</select></p>
<p style="padding-left: 5px; ">Departure State / Province:<br />
<select name="state" onChange="buildCity('','');"><option selected value=""> - No state selected - </option>
</select></p>
<p style="padding-left: 5px; ">Departure City / Metro Area:<br />
<select name="city">
<option value="">Entire State</option>
</select></p>
<div id="searchboxrightcol">
<p>Or search by Zipcode:<br /><input type="text" name="zip" size="15"></p>
<p>Browse local rates & inventory. Locate specific bus types</p>
<p><a href="#">Search</a></p>
</div>
<div id="searchbox_footer">
<p>BusRates.com does its best to screen out brokers but cannot guarantee this.</p>
</div>
</div>
CSS: #searchbox { width: 400px; margin: 0; padding: 0; border: 1px solid #003366; background: #CCCCFF; } #searchboxrightcol { padding: 0; margin: 0; margin-left: 170px; padding-left: 5px; } #searchboxleftcol { width: 160px; float: left; padding: 0; vertical-align: top; border-right: 1px solid black; } #searchbox p { padding-left: 5px; padding-right: 5px; width: auto; height: auto; } #searchbox_header { text-align: center; color: white; background: #003366; padding: 0px; margin: 0px; width: auto; } #searchbox_footer { width: 400px; text-align: center; color: black; padding: 0px; margin: 0px; } #searchbox a, #searchbox a:visited { background: #336699; text-align: center; padding: 5px 50px 5px 50px; border: 2px solid #003366; color: white; font-weight: bold; text-decoration: none; } #searchbox a:hover { background: #FC7400; text-align: center; padding: 5px 50px 5px 50px; border: 2px solid #003366; text-decoration: none; font-weight: bold; } Some reason, the body/html/whatever the hell IE uses as its root, doesn't auto-expand past 100%, meaning vertical scrolling can't occur. What could be going wrong here? Attached is html and css, the relevant css is at top, and is readable, the unreadable css isn't relevant I am using a transparent png file for a background, obviously this will not work in IE so I am using the AlphaImageLoader hack. Unfortunately I am not sure why but the results are not as expected. Here is my CSS: PHP Code: .wrap[class] { margin-left: auto; margin-right: auto; margin-top: -21px; width: 760px; top: 21px; min-height: 100%; position: relative; left: 0px; background-image: url(../images/content_bg.png); text-align: left; } * html .wrap { height:100%; padding-bottom: -20px; margin-left: auto; margin-right: auto; margin-top: -21px; width: 760px; top: 21px; min-height: 100%; position: relative; left: 0px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/content_bg.png'); text-align: left; } The first attachment is IE and the second is Firefox (the correct one). I can't seem to find out how to solve this. Hello I'm a photographer trying to code my site myself, I'm a control freak and trying to learn css but coding is not my thing. I have two different rollover effects on my page but only one part is working. The links on the right of photo function correctly when I hover over them, but the links on top don't change as they should. a link to my css file Can anyone help me on this? I believe i have the order correct (a:hover follows link and visited) but i'm sure it's an easy fix. Sadly, not for me. Thanks for any help here is my site: chrisziebarth dot com/test My css file is located in /style.css 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 Hi, First, I'm using the javascript/tutorial from http://www.htmldog.com/articles/suckerfish/dropdowns/ Visit http://serve5.net/xcage/nav/ . The spacing inbetween each image is fine, it's how I want it to be. However, view it in Mozilla first then in IE. Notice something? In Mozilla it does what it's supposed to correctly - have the 'main' background turn blue, and the sub-menu background turn green. However, in IE, this makes BOTH the 'main' and sub-menu background green, instead of keeping the main one blue. I have tried for the past 15 minutes trying to figure this out, but came up empty. I believe it's a problem in the javascript hover code, located in sfhover.js.... since that's what controls IE's hover and it works fine in Mozilla Could you look at the code and tell me whats wrong? http://serve5.net/xcage/nav/ http://serve5.net/xcage/nav/styles/xcage.css http://serve5.net/xcage/nav/scripts/sfhover.js Thanks. 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 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 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. 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... 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! 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> 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 I'm using the following code. I'd like the DIV that surounds the up / down images to more tightly wrap the images (there is too much space between the top and bottom border and the images). I'm having trouble understanding how to accomplish this. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>
.nav_box {
width: 95%;
padding: 1px 1px 1px 2px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #003366;
background-color: #eef7ff;
text-align : left;
}
</style>
</head>
<body>
<div class="nav_box">
<img ... />
<img ... />
Row Zero
</div>
</body>
</html>
I am trying to get away from tables to get images in a formatted manor. I have a div with a id giving each padding and margin element (left right, top, bottom) that sets them to 0px. How can put a couple of images together (<img src="" /><img src="" />) in a div (or span) without having whitespace between them? - Thanks for the help - K |
|||||||