|
CSS - Ie/ff Inconsistencies
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. Similar TutorialsSo 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. 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 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>
|
|||||||