|
CSS - Css Code Problems Between Explorer And Firefox
Hi, I'm studyng php for content management system.
The php is ok. I used an external stylesheet, when i see it in Firefox is ok. But when i see it in Explorer it's not ok. The problem is on the left colum, the lists don't work well in Explorer. It seems to be difference between how Explorer and Firefox works with Stylesheets. If can anyone help to make this css code compatible for the two browsers. Here's the code of my css : /* Site Colors: #1A446C - blue grey #689DC1 - light blue #D4E6F4 - very light blue #EEE4B9 - light tan #8D0D19 - burgundy */ html { height: 100%; width: 100%; } body { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; background: #D4E6F4; font-size: 13px; line-height: 15px; } img { border: none; } table, tr, td { border-collapse: collapse; vertical-align: top; font-size: 13px; line-height: 15px;} a { color: #8D0D19;} #header { height: 70px; margin: 0px; padding: 0px; text-align: left; background: #1A446C; color: #D4E6F4; } #header h1 { padding: 1em; margin: 0px;} #main { margin: 0px; padding: 0px; height: 600px; width: 100%; background: #EEE4B9; } #structure { height: 600px; width: 100%; } #footer { height: 2em; margin: 0px; padding: 1em; text-align: center; background: #1A446C; color: #D4E6F4; } /* Navigation */ #navigation { width: 150px; padding: 1em 2em; color: #D4E6F4; background: #8D0D19; } #navigation a { color: #D4E6F4; text-decoration: none; } ul.subjects { padding-left: 0; list-style: none; } ul.pages { padding-left: 2em; list-style: square; } .selected { font-weight: bold; } /* Page Content */ #page { padding-left: 2em; vertical-align: top; background: #EEE4B9; } #page h2 { color: #8D0D19; margin-top: 1em;} #page h3 { color: #8D0D19; } Thanks for yout time. Similar TutorialsHey guys, I'm in need of some help here. Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two. If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself. Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template. http://thecheckoutplace.com/compute...eOneNetbook.php If anyone can offer a hand, it means a lot. Cheers guys. Hi i was wondering if i could get a hand with some css i have, its working properly on firefox but its not working with explorer ( i have the ie7 patch)... Ive included the css i think its #header3b1 causing the problem... Code:
@charset "UTF-8";
/* CSS Document */
/* CSS Document */
body {
background-color:#F5E9D9; margin:0; color:#4D4747;
}
img {
border:none;
}
div, h2, a, img, p {
margin:0; padding:0;
}
.spacer {
line-height:0; font-size:0; clear:both;
}
#frame {
width:761px;
height:895px;
background-color:#F5E9D9;
margin:auto; color:#4D4747;
}
#container1 {
width:751px;
height:142px;
padding-left:5px;
padding-right:5px;
float:left;
background-color:#F5E9D9; color:#4D4747;
}
#header1 {
width:185px;
height:142px;
background-color:#551001;
float:left; color:#4D4747;
}
#header2 {
width:280px;
height:102px;
float:left;
padding-left:24px;
padding-top:40px;
}
#header3 {
width:262px;
height:142px;
float:right;
}
#header3a {
width:240px;
height:43px;
background-color:#F5E9D9;
float:right;
padding-top:67px;
padding-right:22px;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#AA8780;
}
.nav a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#AA8780; background-color:inherit;
font-weight:normal;
text-decoration:none;
}
.nav:hover{
color:#6D2517; background-color:inherit;
}
#header3b {
width:262px;
height:32px;
}
#header3b1 {
float: left;
width:185px;
height:350px;
background-color:#551001;
display: block;
}
#header3b2 {
width:50px;
height:32px;
background-repeat:no-repeat;
background-position:top right;
}
#container2 {
width:751px;
height:195px;
padding-left:5px;
padding-right:5px;
}
#container2a {
width:489px;
height:195px;
float:left;
}
#container2b {
width:260px;
height:193px;
border:1px solid #F2DBBA;
float:right;
}
#container2b1 {
width:220px;
height:Auto;
margin:auto;
padding-top:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
}
.container2b2 {
width:200px;
height:22px;
padding-left:20px;
margin:auto;
}
.links {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#551001; background-color:inherit;
font-weight:bold;
text-decoration:none;
}
.links:hover {
color:#C15740;background-color:inherit;
}
#container3 {
width:751px;
height:350px;
padding-left:5px;
padding-right:5px;
}
#container3a {
width:151px;
height:498px;
background-color:#551001;
float:left; color:#4D4747;
padding-left:34px;
}
.container3a1 {
width:121px;
height:24px;
border-top:1px solid #AA8880;
padding-left:22px;
padding-top:7px;
}
#container3b {
width:304px;
height:495px;
float:left;
margin:0 0 12px;
overflow: hidden;
}
#container3bb {
width:550px;
height:495px;
float:left;
margin:0 0 12px;
}
#container3b1 {
width:240px;
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#4D4747;
font-weight:normal;
text-decoration:none;
margin:16px 32px 0px 32px;
text-align:justify;
line-height:14px; background-color:inherit;
}
#container3b1 h2 {
height:33px; text-indent:-2000px;
background:url(images/welcome.gif) 0 10px no-repeat;
}
.container3b2 {
width:240px;
height:28px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FF0000;
font-weight:normal;
text-decoration:none;
margin:0px 0px 0px 32px;
text-align:right;
background-color:inherit;
}
.container3b2:hover {
color:#830202; background-color:inherit;
}
#container3b3 {
width:227px;
height:28px;
padding-left:13px;
padding-top:9px;
margin:0px 32px 0px 32px;
text-indent:-2000px;
}
#container3b4 {
width:238px;
height:202px;
margin:0px 32px 0px 32px;
background-repeat:no-repeat;
background-position:top right;
}
#container3b4a {
width:100px;
height:176px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:14px;
padding-left:10px;
padding-top:15px;
}
.brown {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
text-decoration:none;
font-weight:normal;
}
.brown:hover {
color:#3B0B00; background-color:inherit;
text-decoration:underline;
}
#container3c {
width:262px;
height:490px;
float:left;
margin:0 0 12px;
}
.container3c1 {
width:231px;
height:30px;
background-color:#AC3A02; color:#4D4747;
padding-top:7px;
padding-left:9px;
margin-top:22px;
}
.container3c1 h2 {
background:url(images/specials.gif) 0 0 no-repeat; text-indent:-2000px;
}
.container3c11 {
width:231px;
height:30px;
background-color:#AC3A02; color:#4D4747;
padding-top:4px;
padding-left:9px;
margin-top:22px;
}
.container3c11 h2 {
background:url(images/gallery_side.gif) 0 0 no-repeat; text-indent:-2000px;
}
.special {
margin-top:55px;
}
.special h2 {
background:url(images/some_specials.gif) 0 0 no-repeat; text-indent:-2000px;
}
#container3c2 {
width:233px;
height:350px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-image:url(images/special.jpg);
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
background-repeat:no-repeat;
background-position:bottom left;
}
#container3c22 {
width:233px;
height:170px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#F2DBBA;
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
background-repeat:no-repeat;
background-position:bottom left;
}
#container3c2a {
width:104px;
height:350px;
float:right;
padding-right:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
text-decoration:none;
font-weight:normal;
line-height:12px;
}
#container3c2a1 {
width:80px;
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-weight:normal;
text-align:justify;
float:right;
padding-left:24px;
}
.container3c2a2 {
width:188px; color:#4D4747;
height:179px;
background-color:#F5E9D9;
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
padding-left:25px;
padding-right:25px;
padding-top:22px;
}
.img {
width:99px;
height:86px;
float:left;
}
.img1 {
width:99px;
height:79px;
float:left;
}
.text {
width:80px;
height:78px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
line-height:12px;
float:right;
text-align:justify;
}
.dummy {
clear:both;
}
a {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
text-decoration:none;
font-weight:normal;
text-align:right;
}
a:hover {
color:#B25B46; background-color:inherit;
text-decoration:underline;
text-align:right;
}
.blank {
width:186px;
height:86px;
}
#container4 {
width:751px;
padding-left:5px;
padding-right:5px;
background-color:#F5E9D9; color:#4D4747;
margin:0px 0px 0 0px;
}
#container4a {
width:489px;
height:22px;
background-color:#E0E0E0; color:#4D4747;
float:left;
padding-top:10px;
}
#container4b {
width:262px;
height:22px;
background-color:#551001;
float:right;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
padding-top:10px;
}
#container4 p {
text-align:center; clear:both; padding:15px 0;
font:12px/18px Arial, Helvetica, sans-serif;
}
.scroller {
overflow-y: auto;
overflow-x: hidden;
}
any ideas, thanks I am learning css and as many people do, have used code given gratefully by someone else, Code: ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position: relative;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000;
margin-bottom: 0px;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
float: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #6290B2
margin-bottom: 0px;
}
ul li a {
display: block;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #6290B2;
background: #FFF;
padding: 5px;
border: 1px solid #ccc;
margin-bottom: 0px;
}
li:hover ul, li.over ul {
display: block;
}
www.indigochilli.co.uk/eheating now im sure it works fine(with no spaces between the boxes) for all using firefox or something similar, however I need it to work for exmplorer, which it doesnt, because it is a drop down(well sideways) menu, (which btw you cant see because your not logged in) the spaces mess up the functionability of it. Now I have messed around with heights, margins alsorts but explorer isnt cooprtating, is this a problem explorer often has? Hi I have been working on this all day, and am starting to see double This site plays nice on all browsers except IE , the top menu that is lastchancemusic.gr/testing/ could anyone please help Hi, I would really appreciate some help sorting out an error that seems to only crop up on IE. http://www.formulation.org.uk/redesign Is fine on mac browsers (Safari/Camino/Firefox etc.). and fine on windows firefox. the problem appears to be with content wrap. It covers a majority of the banner and navigation bar background. I did manage to fix this with fixed positioning - however this caused adverse effects to the footer. Thanks in advance, Tom Hi guys, On the following page http://www.thekhans.me.uk/origami.php Internet Explorer only displays the image below the content on the right hand side; This glitch is only apparent in IE, Firefox and Opera render the page correctly, like below: Any work arounds? Hi All; I generated this page : www.lilahd.com/bevi In webgen and cannot view it correctly on IE . Please view the page in IE and then in Firefox . Why does that happen . Hey guys, I'm trying to use div classes and z positioning to make a background that will stretch to the size of the browser window. The following code works fine in Firefox but the dimensions are wrong when viewed in IE. .bg_image { width: 100%; height: 100%; left: 0px; top: 0px; position: fixed; z-index: 0; } <div class="bg_image"> <img src="image_link.extension" width="100%" height="100%"> </div> My solution so far has just been to use the following to ensure that if it doesn't load properly that at least something loads- *html .bg_image { width: 1600; height: 2150; left: 0px; top: 0px; position: absolute; z-index: 0; } Is there any way I can get IE to recognize the 100% for height and width? Hi everyone! I'm pulling my hair out on this one. I must confess I'm a bit green when it comes to css, but I've been playing around with this page and was finally able to get it looking the way I want in IE. If you look at it in Firefox or Netscape, the container doesn't expand at the bottom, and the links just spill out. Any ideas on how I can get this to expand like it does in IE? http://www.gotop100.com/test.html Thanks! I created a CSS box where there's a header image & a css box under it, having 3 sides (no top border). It looks good in firefox, but can't get the box to close all the way (by meeting the header image) in explorer. There's a 2-3 px space there. li'l help please? Hi, I'm noticing a different behaviour between firefox and explorer regarding de margin attribute, and I can't explain it applying the well known box model difference. Here is the css code: Code: div#main {
margin: 10px auto 20px auto;
width: 1001px;
border: 1px solid #000000;
}
div#left {
float: left;
width: 150px;
}
div#content {
width: 600px;
margin-left: 160px;
background-color:#0033CC;
}
Here is the HTML: Code: <div id="main"> <div id="left">left</div> <div id="content">content</div> </div> What I get in firefox is the expected, the content div is exactly at 160px distance of the inner part of the main div border. However in explorer the distance is 163px?? According to the box model difference, if we consider that in explorer the width includes the border, the distance should be 161px but not 163px. Any ideas? Caste http://www.djoj.net/home.html <- Faulty Page http://www.djoj.net/style.css <- CSS Hey, for some reason in Internet Explorer my Div will not center and I do not know why. I will try and prvide more detaily when I get home from school. Thank you, ~Brendan Sorry for the "general" title but I don't know what is causing my problems, so it is hard to be specific... I am working on a web application for my summer research project, but I am not very knowledgeable in CSS. For the most part I am able to solve my problems except for the following: Issue 1: Profile Display Issue 1 CSS file The copyright at the bottom. Firefox displays correctly. Explorer displays too much white space above the copyright text. Issue 2 *IMPORTANT*: Profile Display (with missing fields) Issue 2 CSS file The text in the SME Profile does not display correctly when some of the fields are left blank (Issue 1 link shows a full profile). I'm trying to avoid using tables as it would cause some major setbacks in my work. FYI, the pages are dynamically generated so links will not work. Any suggestions? Hi, I'm designing the following site: http://www.texasmocktrial.org if you click on the top menu in fire fox, you'll notice that the connector to the menu in the top left hand corner is not aligned properly. in IE, there is no problem. ironically, i originally designed this site for firefox and now i cant figure out what i did to cause this problem. here is the css & javascript file: http://www.texasmocktrial.org/templates/style.css http://www.texasmocktrial.org/templates/menu.js can anyone figure out what seems to be the problem? thanks. I'm trying to do some positioning with CSS laying out borders for my website which are composed of images. ie....border_left.jpg and border_bottom.jpg. My style sheet looks like this. .border_image_left { position: absolute; top: 119px; left: 0px } .border_image_bottom { position: absolute; top: 719px; left: 0px } In my html I have code like this. <p class="border_image_left"><img src="img/left_border.jpg"></p> <p class="border_image_bottom"><img src="img/bottom_border.jpg"></p> however IE and Firefox are rendering it different Firefox shows more space than IE. Anyway to correct this issue. Or any other trick for laying out borders with using a table? Thanks look at URL in both IE and Firefox, and see the difference. It's really butchered in Firefox, and I REALLY don't see why. My code seems okay. source: PHP 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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>my index...</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body class="body"> {start loop} <div class="content2"> <div class="newsheader"><p class="leftalign"><b>{title}</b></p><p class="rightalign">{author} - {day} / {month} / {year}</p></div> <div class="newscontent">{content}</div> <div class="newsfooter"><p class="rightalign"><a href="{commentsurl}">see comments</a></p></div> </div> {end loop} {next page} </body> </html> CSS: PHP Code: a { color: #000000; text-decoration: underline; } a:hover {color: #808688;} body { background: #F2F0F0; color: #880000; text-align: center; } div.content { border: 1px solid; margin-top: 1px; margin-left: 0px; margin-right: 5px; padding-left: 0px; padding-top: 2px; padding-bottom: 2px; padding-right: 2px; text-align: center; width: 97%; border-color: #880000; float: inherit; } div.content2 { border: 1px solid; margin-top: 0px; margin-left: 0px; margin-right: 0px; padding-left: 4px; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; text-align: center; width: 90%; background-color: #C9C9C9; float: inherit; } div.newsheader { margin-left: 0px; margin-right: 0px; width: 100%; background-color: Maroon; border-bottom: 1px solid; padding-bottom: 3px; color: white; float: inherit; } div.newscontent { text-align: justify; padding: 2px; color: black; } div.newsfooter { margin-left: 0px; margin-right: 0px; width: 100%; border-color: Maroon; border-top: 1px solid; padding-bottom: 3px; color: black; float: inherit; } div.container { margin-left: auto; margin-right: auto; text-align: center; width: 100%; } p.rightalign { float:right; } p.leftalign { float:left; } if anyone could help.. im losing my calm :P on this page the image on the left that reads "Grade" is 10px from the side (where it should be) in IE... but in firefox, it isnt 10px from the side... but rather 0px... when i change the margin-right to 20px instead of 10px, it looks fine in Firefox, but 10px too far over in IE. any help would be GREAT thanks hi, I wonder if anyone can help with my layout problems in Firefox, i have tried to have vertically alignment on the whole page, its looks ok in IE but not FF. Im fairly new to CSS so if anyone can spot what i have done wrong that would be great link to layout here thanks |
|||||||