|
CSS - Ie Inconsistencies - Centering And Vertical Margins
Hello,
i'm have a recurring problem when programming websites and it is the vertical spacing added by IE6 between two images. Here is an example template I am working on. brycecre8iv.com The lines beneath the buttons are getting an extra 10px padding at the top in IE6. Appears in order on FF2. Also for some reason the centering is not working with the main container in IE. this usually works perhaps someone can spot my errors. Thanks for any help. webg Similar TutorialsDoctype: XHTML Strict. Platform & browsers: Tested on Windows XP using IE 6.0 (with SP2), Opera 7.54 and FireFox 1.0 HTML: Code:
<div id="wrapper">
<p>Wrapper</p>
<div id="floatRight">
<p>Float Right</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
<p>Dummy Text</p>
</div>
<div id="leftHuggerNotFloated">
<p>Hugging Left This is really really long text just to see if the text wraps properly and does not disappear behind the right floated div which is yellow.</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
#floatRight and #leftHuggerNotFloated are positioned side-by-side. Note that #floatRight comes first in the source. As you will see later, #leftHuggerNotFloated is not floated at all. The problem occurs only when #floatRight is longer than #leftHuggerNotFloated. The CSS: Code:
/*****************************
Some preliminary CSS to remove the
relavent cross-browser inconsistencies
for convenience.
******************************/
body {
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
}
/*****************************
Actual CSS. Background colors are for
convenience. #wrapper is given
height: 1% because IE6.0/Win may
occassionally not display #leftHuggerNotFloated
without first highlighting it.
******************************/
#wrapper {
background: red;
height: 1%;
}
/***********************
Note, #leftHuggerNotFloated is positioned
to the left of #floatRight but is NOT
floated to the left.
*************************/
#leftHuggerNotFloated {
background: blue;
clear: left;
}
#floatRight {
background: yellow;
clear: right;
float: right;
width: 200px;
}
#footer {
background: #cccccc;
clear: both;
/* margin-top: 50px;*/
/* margin-top: 200px;*/
}
Here is how the browsers all display it. No problem. When #footer is given a top margin of 50px, the problems begin. IE and Opera display it the same but FF doesn't appear to show any difference. I'm no expert when it comes to vertical (and collapsing) margins but I'm inclined to go with FF here. I think that #footer's top margin should be with respect to the previous staticly positioned element which is #leftHuggerNotFloated. IE and Opera appear to be taking the floating div as the reference point. Now here is where things get stranger. When I increase #footer's margin to 200px, suddenly IE agrees with FF and takes #leftHuggerNotFloated as the reference point while Opera continues to do it's own thing and measure the top margin from the floating div. So my questions a 1. With a top margin of 50px, am I right to assume that FF is displaying the page correctly? 2. Without changing the order of the HTML, are there any CSS techniques to get the browsers to agree on the reference point for #footer's top margin? (padding seems to achieve a similar effect though, assuming that I don't want to make use of #footer's border or background color in any way). I know a few ways of solving this problem by moving the source code around but right now that's not what I want to do. The reason I'm not floating #leftHuggerNotFloated is because I want the div to stretch to fill whatever horizontal space is available between the left side of the screen and #floatRight. With float, I'll need to specify a horizontal width (which I will not know in advance) otherwise the div will simply be as wide as the content it contains. I even tried messing around with negative margins. I made some progress but all the browsers started showing things differently. I guess let me start with centering. I have Code: body {
margin: 1%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 1.75em;
background-color: #6E4E1C;
text-align: center;
}
#wrapper {
background-color: #343457;
width: 775px;
position:absolute;
margin: 0px auto;
text-align: left;
By everything I read, setting the body's text-align to center, and the wrapper's margins to auto should do the trick. When I copy other stylesheets, they work. But when I type it in, it doesn't? Mozilla puts content at the left, and IE6 puts the left border of the wrapper in the center of the page causing horizontal scroll. (actual pages at http://lgs.lambrite.com/new.css and http://lgs.lambrite.com/test2.htm 2nd, if you visit the htm page above you see that my content div does not extend down to meet the footer. I have looked at the faux columns, but can't make that work and keep my blue border at the bottom, unless I add another wrapper div to hold the background, inside of the primary wrapper div. This seems not the best way to do this. Any suggestions? Lastly, in Mozilla, the url background on my sublinks nicely meets the content background, but in IE, there is a nice empty blue space between them I understand that this probably has to do with the box model issues, but have no idea how to fix it. I'd also welcome any criticism on my stylesheet (aside from the fact that it is not in short-hand - I am not familiar enough yet). You guys are great for newcomers - I know I really appreciate the help! Sarah How can I get the text to display in the middle of these boxes (vertically)? I would think vertical-align: middle would do it, but it doesn't work. Thanks in advance for any help! LauraS. Here's 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.buttonscontainer-top {
width: 142px;
height: 36px;
}
.buttons-top a {
color: #777777;
background-color: #DDDDDD;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
display: block;
height: 36px;
text-align: center;
vertical-align: middle;
}
.buttons-top a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
}
</style>
</head>
<body>
<table width="710" height="36">
<tr>
<td class="buttons-top a"><a href="index.html">home</a></td>
<td class="buttons-top a"><a href="about.html">about</a></td>
<td class="buttons-top a"><a href="our_work.html">our work</a></td>
<td class="buttons-top a"><a href="clients.html">clients</a></td>
<td class="buttons-top a"><a href="contact.html">contact</a></td>
</tr>
</table>
</body>
</html>
I have a div that is 60px high. I want text to be centered vertically in that box. I know it is easy to do with tables, but how do you do it with css and divs? i tried using vertical-align, but that didn't seem to work. any ideas? So here's the page I'm working on: http://johannkwan.com/about.html The HTML side is simple: Code: <div id="horizon"> <div id="wrapper"> <div id="about_content">About</div> <a href="http://www.johannkwan.com" id="back">Back</a> </div> </div> The CSS side is just a horizon bar with the wrapper in the middle, the top margin offset to half the wrapper so it'll center properly. Code: #horizon {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
margin-top: -300px;
text-align: center;
min-width: 800px;
}
#wrapper {
position: relative;
text-align: left;
width: 800px;
height: 600px;
margin: 0px auto;
}
Here's my problem. If you're looking at the page on anything under 800x600 (or if you resize your browser to under 600) the top bit cuts off. You can't scroll up past part-way up the image. But it's not 300px of cut off... it's some sort of distance I haven't defined, so I'm not entirely sure where I'm going wrong. Is there a better way to vertically center my content? Or is there just something wrong in my stylesheet I'm not seeing? Any help would be appreciated. Thanks! Hello everyone, I'm trying to center a fixed size div both vertically and horizontally. Everything would work, but, as usual ... IE doesn't know how to handle it properly. Let me explain: 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 name="robots" content="ALL, INDEX, FOLLOW" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Title</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.d1 {
width: 1px;
height: 1px;
position: absolute;
left: 50%;
top: 50%;
}
.d2 {
width: 700px;
height: 300px;
background-color: black;
position: relative;
left: -350px;
top: -150px;
}
</style>
</head>
<body>
<div class="d1"><div class="d2"></div></div>
</body>
</html>
If you copy and paste it to explorer, everything might even look good. But if you resize the browser to be just a little bit larger than the black div, you'll notice that both vertical and horizontal scrollbars appear. Why is this happening? How do i prevent IE from acting stupid? I've tested with ie6 and ie7. Hi, I would like to center a div inside another div (both vertical and horizontal) in such a way that the inner div would move/reside depending on the content inside it. In other words I have two divs; outerDiv and innerDiv. InnerDiv will have more html inside it and I would like innerDiv to always be in the middle of outerDiv regardless of its content. I did some research on the internet and I managed to achieve the following: 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>
<style type="text/css">
div#mbBackground{
display:block;
position: fixed;
top: 0px;
left: 0px;
width: 100% !important;
height: 100% !important;
margin: 0 auto;
z-index: 2;
background-color: #c00;
}
div#mbBackground div#mbWindow{
position:fixed;
top: 40%;
left: 40%;
z-index: 2;
margin: 0 auto !important;
margin-left: 40%;
margin-top: 40%;
height: 200px;
width: 200px;
background-color: #fff;
color: #000000;
}
</style>
</head>
<body>
<!-- start: message box -->
<div id="mbBackground">
<div id="mbWindow">
Please Wait
</div>
</div>
<!-- end: message box -->
</body>
</html>
However with the above code, innerDiv does not re-position it-self correctly based on its content. Is what I need possible? Regards, Sim085 Hi guys. I've got a single element (image) that I want to vertically center in an otherwise blank page. Can anyone tell me how I can do this, that works with all browsers, and doesn't requite tables? http://www.waxpad.com/articles/vcexample.html I found this article on it, but joy of joys, it doesn't work in Safari on a mac! Can someone please explain this to me, because I'm apparently missing something. I have a div that I am using as an overlay to my site. I want this div to be 50% wide, and 50% high, and be properly centered on the screen. I was able to get horizontal centering working almost perfectly, but when it comes to vertical centering- things just don't make sense. To center, I'm setting top & left to 50% and then using margin-top and margin-left with negative values to compensate. What I assume should work (and seems to work with horizontal centering) is that if I set the margin-left to -25%, the leftmost side of my div should end up half-way between the beginning of the browser window and the center of the browser window. But if I set margin-top to -25%, by the same logic, it should move the topmost side of the div up to between the top of the browser view area and the center. But that doesn't seem to happen- at least in FF3: Code:
<html>
<head>
<style>
div#dialog
{
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
margin-top: -50%;
margin-left: -25%;
background-color: #FFFFFF;
border-top: #FF0000 3px solid;
border-left: #FF0000 3px solid;
border-right: #FF0000 3px solid;
border-bottom: #FF0000 3px solid;
z-index: 202;
}
</style>
</head>
<body>
<div id="dialog"></div>
</body>
</html>
Instead what happens is the top of my div ends up at the very top of the viewing area of the browser- and actually a little bit ABOVE it (outside of the view area). WHY!? If I set the margin-top to -50%, which I would expect to place the topmost edge of the div at the very top of the browser viewing area, the div disappears entirely! Yet if I set margin-left to -50%, it appears along the left side of the browser window where I'd expect it to be. Why might this be happening? Again, obviously I'm missing something. Can someone please explain? Is there another/better way of doing this? Thanks, - skubik Hello, Thank you for reading my post This is what I try to create. A Vertical Navigator column with images, without knowing their size, as links and javascript actions. The images should be Horizontally centered. I want to set the width of the div 'navBar' dynamically so that the images inside the 'navElement's grows or shrink but stays in center. The images could be between 55 - 90 pixels width. And I want to have them grow or shrink between 40 - 80 px width. What I already got : The links and javascript actions are working. Also have a column working where the images are centered with a known size, but not working with images without knowing the size. I did try and search for several hours, but couldn't find a good solution. Mainly my question would be, how I can shrink or grow an image without knowing his size. Basicly my html code is Code: <div id="navBar"> <div class="navElement" id="nav1"> <img class="navImg" src="images/home.gif" /> </div> <div class="navElement" id="navN"> <img class="navImg" src="images/notHome.gif" /> </div> </div> my latest css for unknown image size Code: #navBar { /* main page navigation container */
height: 460px;
width: 70px; /* 1. this will be dynamically set */
left: 100px;
top: 151px;
position: absolute;
visibility: visible;
}
.navImg {
height: auto;
width: auto;
/* height: 60px;*/
/*width: inherit;*/
position: relative;
top:0px;
margin:0 auto;
}
#navElement1 {
position: relative;
width: auto;
height: 70Px;
top:0px;
margin:0 3px;
visibility: visible; }
With javascript I add a onclick event handler on each navImg wich trigger the action. This works to. Please, Is someone willing to help with pointers. Thanks in Advance SC my navbar is a <ul> and i jsut added image icons. i have two problems, the placement and the vertical centering. placement: well, i guess its best to show you the code and what i had to do to get it in place. i used position:relative and then changed the bottom, but why is it so obscure??? Code: #navbar {
text-align:right;
background-image: url('images/menu_new.GIF');
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
padding-right: 8px;
margin-top:-12;
height:31;
}
#navbar ul {
margin-right: -0.3em;
height:31px;
position:relative;
bottom:-2px;
}
#navbar ul li {
display: inline;
list-style-type:none;
margin-left: 0.3em;
margin-right: 0.3em;
position:relative;
vertical-align:middle;
}
#navbar ul li a {
padding-top:11px;
color:#495B20;
background-color:#BAD36B;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
#navbar ul li a:hover {
background-color:#495B20;
color:#BAD36B;
border-left: 2px solid #000;
border-top: 2px solid #000;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#navbar ul li div {
position:relative;
}
#navbar ul li img {
border:none;
width:24px;
height:24px;
padding-right:4px;
margin: 0;
}
vertical centering: i have looked at the tutorial, but i need serious help. i'm not trying it again, im missing something. can someone please show me how do do this? i want to center it like this... ....................................... . . . texttexttexttexttext. .image texttexttexttexttext. .----- texttexttexttexttext. . . ....................................... so both the image and text are centered but theyre floated left. actually, maybe they dont need to be floated cuz its just a word or two. look at the header for the best desc. i have tried this with my game box, and i'm clued out. i really hope sum1 can help me with this. http://www.viportals.com/ EDIT: DID IT ON MY OWN!!! THATS A FIRST!!! Code: #navbar {
text-align:center;
background-image: url('images/menu_new.GIF');
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
margin-top:-15px;
height:31px;
line-height:31px;
margin-left:0;
margin-right:0;
}
#navbar ul li {
display: inline;
list-style-type:none;
}
#navbar ul li a {
padding-left: 0.3em;
padding-right: 0.3em;
padding-top: 4px;
padding-bottom: 4px;
color:#495B20;
background-color:#BAD36B;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
#navbar ul li a:hover {
background-color:#495B20;
color:#BAD36B;
border-left: 2px solid #000;
border-top: 2px solid #000;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#navbar ul li img {
border:none;
width:24px;
height:24px;
padding-right:4px;
vertical-align: middle;
}
now i have one QUESTION: how do i get all the buttons to align center?????????? they all stay to the right oh, and not a huge deal, but the text is a couple pixels down so it brings the image down too. how can i make the text in the vertical middle? the line-height thing only worked so well. Hi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. I'm trying to help out a friend with his layout, but I can't seem to find what the problem is. If you look at this website in FireFox, it looks normal. If you look at it in IE, it looks terrible. It seems like a padding issue, but I can't for the life of me figure out the problem. Here's his CSS : Code: body {
background-color: #F7F0D4;
}
.wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.header {
background-color: #FFFF66;
position: absolute;
top: 0;
left: 0;
width: 100%;
border-bottom: 1px solid #666;
}
#navlist
{
margin: 0;
padding: 75px 10% 20px 10%;
border-bottom: 1px solid #666;
background-color: #DAFA5A;
}
#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
width: 100%;
}
#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10% 0 10%;
text-decoration: none;
color: #666;
padding: 0 5% 0 5%;
}
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #000;
padding-bottom: 2px;
background: transparent;
color: #000;
}
#navlist a:hover {
color: #000;
}
Anyone able to figure it out? I'd appreciate it. So I have been reading a lot about the inconsistencies I am noticing with the way that padding is handled in various browsers. Apparently the compliant handling is to add padding to the declared width or height. However, IE includes the padding in the declared width. The author of one article I read went so far as to say that he never mixes a declared width or height with padding or margins. He will have an outer div that sets the padding/margin, and an inner div with a set width. This is all well and good, but I am using css to format my anchor tags as a block element (in essence making a link that sort of looks like a button). And another undesired result of IE is that it did not treat a div inside an anchor tag as part of the anchor (you could not click on it). So is there anyway to work around the different treatments of padding to achieve a consistent result? Or is there a better approach than what I am trying to do? This is my current CSS which renders differently in IE than it does in Safari/Firefox: Code:
.whiteButton:link,.whiteButton:visited,.whiteButton:active{
display: block;
background-color:#FFFFFF;
width:110px;
color:#46C3D2;
font-weight:bolder;
padding: 4px 4px 4px 4px;
margin:3px 0px 2px 0px;
}
.whiteButton:hover{
background-color:#46C3D2;
color:#FFFFFF;
}
Hello, I am trying to build a site based off of this template. It looks exactly as I want it to using IE 6.0.2800, but firefox screws it up pretty bad. Does anyone have an idea as to why it looks so bad? Thanks, phrygius Template IE - How it should look (sorry about the little watermark in the bottom-left) FF - Looks screwed up CSS Code: Code:
body {
margin:20px;
background:#8FBC8F;
color: #333333;
text-align:center;
padding:0;
font-family: verdana, arial, sans-serif;
}
#outer {
text-align:left;
border:2px solid #567E3A;
width:800px;
margin:auto;
}
#hdr {
height:59px;
background:#FFFFFF;
color: #333333;
width:798px;
}
#bar {
height:25px;
background:#dcdcdc;
color: #333333;
border-top: #567E3A 1px solid;
border-bottom: #567E3A 1px solid;
padding-right: 10px;
padding-left: 10px;
text-align: right;
width:798px;
}
#bodyblock {
position:relative;
background: #CCFFCC;
color: #333333;
width:798px;
padding:0;
min-height: 500px;
}
#l-col {
float:left;
background:#CCFFCC;
color: #333333;
width:145px;
padding-left: 10px;
padding-top: 20px;
font-size: 10pt;
}
#cont {
width:650px;
background:#ffffff;
color: #333333;
border:solid #567E3A;
border-width:0 0 0 1px;
text-align:left;
padding-left: 10px;
padding-top: 10px;
}
#ftr {
height:25px;
background:#dcdcdc;
color: #333333;
border:solid #567E3A;
border-width:1px 0 0 0;
margin:0;
clear: both;
}
a {
color: #004400;
text-decoration: none;
}
a:active {
color: #004400;
text-decoration: none;
}
a:visted {
color: #004400;
text-decoration: none;
}
a:hover {
color: #008800;
text-decoration: underline;
}
.prop {
float: right;
width: 1px;
}
.min600px {
height: 600px;
}
HTML: Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Competency Model :: Login</title>
</head>
<body>
<div id="outer">
<div id="hdr">
LOGO HERE
</div>
<div id="bar">
TEST! TEST TEST TEST TEST TEST!
</div>
<div id="bodyblock">
<div id="l-col">
<a href="./link1.html">Link1</a><br /><br />
<a href="./link2.html">Link2</a><br /><br />
<a href="./link3.html">Link3</a><br /><br />
<a href="./link4.html">Link4</a><br /><br />
<a href="./link5.html">Link5</a><br /><br />
</div>
<div id="cont">
<div class="prop min600px"></div>
<h1><span style="font-family: Times New Roman, serif;">Login</span></h1><hr />
MAIN CONTENT
</div>
<div id="ftr">
<p style="text-align: center;">
<span style="font-size: 8pt;">Copyright 2006 Foo | Admin Panel [ <a href="./admin.asp">login</a> ]
</span>
</p>
</div>
</div>
</div>
</body>
</html>
Hi all, I'm relatively new to pure CSS (as opposed to hacking tables together) and I'm experiencing a cross-browser inconsistency that I'm hoping I can get help with. I've created a table using DIVS as follows (I've given just one line as an example): Code: <div id='dashed_box'> <div class='divleft'>Company Name:</div><div class='divright'><input type='text' name='company_name' size='32' class='boxes'></div> <div class='spacer'> </div> </div> And the CSS is this: Code: #dashed_box
{
border: 1px dashed #333333;
margin:5 auto;
padding:5 auto;
width: 600px;
}
.divleft {
font-family: verdana;
font-size: 12px;
line-height: 20px;
float: left;
text-align: right;
color: #000;
width: 49%;
}
.divright {
font-family: verdana;
font-size: 10px;
float: right;
text-align: left;
font-weight: bold;
color: #000;
width: 49%;
}
div.spacer {
clear: both;
}
..In IE7 the box is laid out perfectly, as I wanted it to: ..but in FireFox 5.0, it is laid out as follows, which I don't want: Can anyone point out what I might be doing wrong? Or might it be a case of defining HTTP_USER_AGENT and specifying CSS depending on browser? All help appreciated. Woolyg. I'm undergoing the painful conversion from table-based to CSS-based layout. I borrowed some CSS from a website and started playing with the parameters to see what happens, and I'm getting results that don't seem consistent with the CSS documentation I've read. Here are four screenshots of the rendered page, with an editor showing the CSS overlaid on top: Screenshot 1 - This shows the original layout as the original author intended. Both labels and inputs are designated as block elements. If that is the case, why are there not line breaks after each label tag? Why would the paragraph tags be necessary? Screenshot 2 - I degrouped label from the input group, meaning that only inputs should be block-level, but, curiously, the label becomes a block-level element. :-/ Screenshot 3 - I changed the bottom margin on paragraph tags to 29px. This looks very similar to the original layout. Screenshot 4 - When I change the bottom margin to 30px, the label and input elements go inline. Weird. I'm having a lot of trouble reasoning about CSS. Can anyone make sense of this for me? //EDIT: here's the code: Code:
<html><head><title>Form Validator</title>
<style>
<!--
label,input
{
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label
{
text-align: right;
width: 75px;
padding-right: 10px;
}
p
{
clear: left;
margin: 0;
margin-bottom: 10px;
}
-->
</style>
</head>
<body>
<form name=example action=form.html method=POST>
<p><label for=name>name</label>
<input size=20 name=name id=name></p>
<p><label for=addy>address</label>
<input size=20 name=addy id=addy></p>
<p><label for=city>city</label>
<input size=20 name=city id=city></p>
<p><label for=email>email</label>
<input size=20 name=email id=email></p>
<p><input type=submit value="Submit form"></p>
</form>
Hi All, This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently. Take a look at this: http://zeroonedesign.com/beta/newsite/index.html CSS he http://zeroonedesign.com/beta/newsite/style.css Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code Code:
#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}
#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}
#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}
#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}
#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}
Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything. Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. |
|||||||