|
CSS - My Site Works Perfectly In Ff But Not In Ie6/7/8
The problem is fixed now
Hello, In the last few days I made this website: http://www.gambiaguesthouse.nl/index.php?site=home I tested it with firefox and once a day i tested it with IE. Now the site works like a charm in Firefox but after the changes I made today It doesn't work under IE. The width of the site is not correct in IE. This is the CSS code of the website, if I remove the "#all..." part that I made bold the width is correct, but then the site gets very ugly. When I put the "#all..." part back the width of the site isn't correct in IE. De W3C CSS checker gives no errors I hope somebody can see what I do wrong, I am working to figure this out for 2 hours now and I can't find out what the problem is Hope you guys can tell me what I did wrong with my CSS code. Code: body { font-family: verdana; background-color: #bbdaf9; margin: 0; padding: 0; }
#all { color: #062A4E; font-size: 14px; background-color: #e9f3fe; position: relative; width: 632px; min-height: 609px; margin: 7px auto 30px; padding: 202px 167px 10px 204px; }
#head { position: absolute; top: 0; right: 0; width: 1003px; height: 187px; padding-top: 5px; background-image:url(img/titel.jpg); }
#footer { position: absolute; top: -500px; }
#con { background-color: #f3f7fb; width: 100%; min-height: 620px; }
#add { position: absolute; top: 198px; padding-top: 4px; right: 0; width: 165px; height: 605px; }
#menu { position: absolute; top: 198px; left: 0; padding-top: 4px; right: 0; width: 200px; height: 150px; }
#login { position: absolute; font-size: 14px; top: 348px; left: 0; width: 190px; background-color: #e0eefc; border-style:solid; border-color:#f3f8fe;}
#rotating { position: absolute; top: 470px; left: 0; padding-left: 5px; padding-top: 4px; right: 0; width: 200px; height: 350px; }
a { color: #c40000; font-size: 10px; text-decoration: none; margin: 0; padding: 0; border-width: 0; cursor: pointer; }
a:hover { color: #c40000; }
.whitetb { color: white; }
img { margin: 0; padding: 0; border-width: 0; }
li { list-style:none; float: left; text-align: center; border-style:solid; border-color:#f3f8fe; }
ul { border-top: 0px solid #FFF; width: 195px; height: 145px; background: #e0eefc; margin: 0; padding: 0; }
a.menuitem { padding-top: 3px; font-size: 16px; color: #062A4E; text-decoration: none; font-weight: bold; display: block; width: 190px; height: 27px; }
a.menuitem:hover { background: #DCEFF8; color: #116086; }
And this is the HTML source code of my website: PHP Code: <html> <title>GambiaGuesthouse.nl</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <div id="all"> <div id="head"></div> <div id="menu"> <ul> <li> <a class="menuitem" href="index.php?site=home" title="Home">Home</a> </li> <li> <a class="menuitem" href="index.php?site=links" title="Links">Links</a> </li> <li> <a class="menuitem" href="index.php?site=toevoegen" title="Guesthouses">Guesthouses</a> </li> <li> <a class="menuitem" href="index.php?site=contact" title="Contact">Contact</a> </li> </ul> </div> <div id="rotating"> <img src="img/rotate1.jpg" id="rotate"></div> <div id="login"> <form target="index.php?site=login" method="POST"> Gebruiker:<br> <input type="text" name="gebruiker" size="27" /><br> Wachtwoord:<br> <input type="password" name="wachtwoord" size="27" /><br /> <input type="submit" value="Log In" /> </div> <div id="add"> add comes here </div> <div id="con"> <b>Gambia</b><br /><br /> Het is een prachtig land, waar je avontuurlijke dingen kan doen. Maar vooral lekker uitrusten op de prachtige stranden. <br>Het is een geweldig gastvrij land.De plaatselijke bevolking bezit een unieke gave.ze kunnen in het nu leven,en genieten van het moment.</p> <p>Dan is er voor je gevoel even geen verleden en ook geen toekomst,alleen het NU en dan kan je echt leven in zijn puurste vorm,je openen en gelukkig zijn,en dit kunnen de mensen in Gambia. <br>Daarom vind ik dit zo een mooi land,het is prachtig om te zien hoe deze mensen kunnen genieten. dankbaar zijn een groot goed is.</p> <p> Op deze website vindt u een zo groot mogelijk overzicht van Guesthouses in the Gambia.</p> <p>Guesthouses zijn huisjes die verhuurd worden meestal door de lokale bevolking en zijn meestal een stuk lager geprijsd van de hotels in Gambia <br>Ook als u met een groot gezelschap van plan bent om naar Gambia te gaan is een Guesthouse de perfecte manier om te verblijven in Gambia.</p></div> </body> </html> Similar TutorialsI've been working on a layout for my site. It consists of a fixed top menu bar, a fixed left-side menu bar, a fixed right-side bar (possibly used for ads; not sure yet), and a scrollable middle content section. Think a modified Facebook layout. I've been testing with Firefox, and here's what I ended up with (remove the spaces; as a new user, I can't post images, either): htt p://dl.dropbox.com/u/11662651/Graphics/SiteStuff/LayoutGoo d.png That's perfect. It's exactly what I wanted. But then, once I finished it, I tried to test it in IE for compatibility. I almost cried. Almost every aspect of the layout was just completely messed up. Nothing remains fixed when I scroll. Although the menu bar's background color shows it in the right place, all its content shows up below the left-menu instead. In fact, ALL content besides the left-menu shows up below the left-menu instead of in its correct place. And as if that weren't enough, the bullet points on the left-side menu's list (a UL) show up aligned to the left, while the text is aligned to the right (it should be to the right). Besides fonts, not one thing in the layout is correct in IE. But it's all PERFECT in Firefox. I don't usually do this, but because of the scale of how many things are wrong, and because it's only messed up in IE, I'm going to post a download to the .HTML file and ask you to help me figure out what's going on here. So, here's the file (remove the spaces; I'm a new user so I can't post links): htt p:// dl.dropbox.com/u/11662651/Graphics/SiteStuff/index .html?dl=1 Please, please, please, at least get me on the right track to fixing this. And, in related news, I hate IE. Very much. -IMP Hi I have a website which works fine in Firefox, but has problems in Internet Explorer. can someone please have a look and see what is wrong? the positioning of the Div boxes go wrong in IE, and also it seems like the site is scretched vertically. many thanks The top navigation displays fine on the two browsers, but on IE 6 it turns in to a vertical list: http://amarshah.org/bruce/ This is a joomla site and uses the magic menu mod to create the custom font menu. Page Code: Code: <table class="pill"> <tr > <td class="pill_m"> <div id="menuspace" style="float: left;"> </div> <div id="pillmenu" style=" width: 810px; margin-left: auto; margin-right: auto;"> <jdoc:include type="modules" name="user3" /> </div> <div id="menuspace2" style="float: left;"></div> <div id="pillmenu" style="width: 470px; margin-left: auto; margin-right: auto;"> <jdoc:include type="modules" name="user4" /> </div> </td> </tr> </table> CSS Code: Code:
/* horizontal menu */
table.pill {
width:900px;
padding: 0;
margin: 0;
height:87px;
border: none;
text-align:center;
}
td.pill_m {
padding: 0;
margin: 0;
text-align:center;
}
#menuspace {
width: 900px;
height: 15px;
background-color: #d2cdb7;
}
#menuspace2 {
width: 900px;
height: 13px;
background-color: #d2cdb7;
}
#pillmenu {
width: 900px;
height: 22px;
background-color: #d2cdb7;
text-align:center;
}
#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}
#pillmenu li {
float: left;
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
display:block;
height: 22px;
padding: 0px 4px;
color: #000000;
text-decoration: none;
}
#pillmenu a:hover {
color: #96abbe;
}
#pillmenu a#active_menu-nav {
height: 22px;
}
Hi I am not new to web development but fairly new to css and learning css-xhtml for web 2.0. I am making a design at http://www.superstaruk.com/v/ it shows fine in IE but in FF, Chrome and Opera etc it shows broken. Main problem is with pistioning the divs and also the background of free delivery does not appear. Can anybody help me please by pointing out the problem? I read the box-model but even according to that i am unable to solve this. thank you As a CSS beginner I want to change my few table based web sites to CSS based. Currently I may have a table with a border exactly fitting a graphic image... looks nice. Now I want that same image to fit perfectly in a CSS box in order to take advantage of all the extra features of color and border that comes with CSS. The problem is... nothing that I do will exactly fit the rectangular image in the CSS box. I have fooled with the dimensions of the box and image but somehow there is ALWAYS about a 4px edge of background at the bottom edge of the image. The left,top,right borders are exactly bordering the image as should be. Is this possible in CSS, I would like to follow the CSS way. #bottom_center { margin: 0px; padding: 0px; background: #ccc; width: 470px; height: 90px; border-style: ridge; } ---- then in the body ---- <div align="center"> <div id="bottom_center"> <img border="1" src="able_appraisal_web_logo.jpg" alt="Able Appraisal, Inc." width="470" height="90"> </div> </div> Hi, i'm working on this search box but I can't get the 3 elements perfectly aligned, the bottom of the elements should be aligned. What I have is: Search: <input> <img> Search is <label>, input is a normal input text box, <img> is used instead of submit. The problem is, that the <img> is about 5px higer than the other two. The Search label and input are middle aligned. Does anyone have a solution for this positioning problem? A link with workarounds would be useful. Thanx. I got the following, which is perfectly displayed in IE: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#container { overflow: hide; }
#container .content { float: left; margin: 0px 0px -2000px 0px; padding: 0px 0px 2000px 0px; }
</style>
</head>
<body>
<div style="width:585px;overflow:hidden;" id="container">
<div style="width:585px;height:9px;background-image: url(images/product/mid_top2.gif);background-repeat:no-repeat;padding:0px;float:left"></div>
<div class="content" style="width:1px;background-image: url(images/product/mid_back_edge2.gif);background-repeat:repeat-y;clear:both"></div> <!-- div missing in FF --->
<div class="content" style="width:583px;background-image: url(images/product/mid_back2.gif);background-repeat:repeat-x;">
content goes here..
</div>
<div class="content" style="width:1px;background-image: url(images/product/mid_back_edge2.gif);background-repeat:repeat-y;float:left"></div>
<div style="width:585px;height:7px;background-image: url(images/product/mid_bottom2.gif);background-repeat:no-repeat;clear:both;float:left"></div>
</div>
</body>
</html>
But the div at the left-side (see comment) is just not shown in Firefox. Can anyone explain why? Hi everybody, I'm sure there is a very simple solution to this layout problem but I haven't been able to fix it. My design displays perfectly in Firefox but is out of place by 40px in IE. URL The CSS in question is certainly this div: Code: #sub-content ul li a {
...
margin-left: -40px;
position: relative;
}
I've tried various IE hacks, such as the ones mentioned on Centricle, e.g: Code: div>#sub-content ul li a {
margin-left:0px;
}
But to no avail. Would a CSS guru mind helping me out? Hi, I'm relatively new to web development and I am self taught so please forgive any noobish comments haha. Basically I am building my company's web page and I have it all done except for one small discrepancy. My navigation bar at the top of the page has 4 links to the various sections of the website and they are in the right place in Safari, Chrome, Firefox, and Opera but in IE they are all out of whack. I've been banging my head against the desk trying to figure out whats wrong with either my CSS file or HTML code with no luck. I've validated both my CSS and HTML on the W3C validators and they come back with no errors. Not even a warning. Its all valid code. So I've heard this is common when dealing with compatibility issues that IE is the worst. So could someone please take a look at my code and see if they can find out whats wrong? Here is my CSS... #navbar { font-family: "Frutiger LT 55 Roman", Arial, sans-serif; height: 103px; width: 792px; padding-bottom: 0px; background-color: #0097c6; } #bigpic { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #leftcol { color: #585858; font-size: 10pt; width: 365px; padding-top: 15px; padding-left: 5px; padding-right: 7px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #rightcol { color: #585858; font-size: 10pt; width: 365px; padding-top: 24px; padding-left: 5px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: right; } #threecol-mid { color: #585858; font-size: 10pt; width: 195px; padding-top: 24px; padding-left: 10px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #threecol-right { color: #585858; font-size: 10pt; width: 195px; padding-top: 24px; padding-left: 5px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: right; } #leftcol-nohead { color: #585858; font-size: 10pt; width: 365px; padding-top: 24px; padding-left: 5px; padding-right: 7px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #footer { width: 792px; padding: 0px 0px 0px 0px; margin: 0px 0px 10px 0px; color: #999999; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 8pt; border-top-style: dotted; border-top-color: #999999; border-bottom-style: dotted; border-bottom-color: #999999; border-width: thin; clear: both; } .logo { padding-top: 18px; padding-left: 10px; padding-right: 10px; float: left; } #navlinks { padding-top: 4px; padding-right: 5px; margin-bottom: -4px; position: relative; float: right; } .allcontent { width: 800px; margin-left: auto; margin-right: auto; } h2, h3, h4, h5 { margin-right: 1px; margin-left: 0px; margin-bottom: 0px; margin-top: 1px; padding-bottom: 0px; padding-top: 0px; font-family: Arial, sans-serif; } .heading1 { font-family: Arial, sans-serif; font-size: 16pt; } .heading2 { font-family: Arial, sans-serif; font-size: 10pt; font-weight: bold; } a { text-decoration: none; color: #0097c6; } img { border: 0; } .disclaimer { font-family: inherit; font-size: xx-small; } The problem lies with the navlinks ID I think. Basically, IE doesn't put the images (which are also links) where I want them while all the other browsers do. Something funky about the way IE reads CSS maybe? I don't know. If more info or code is needed I'll gladly provide. Thanks in advance, Griz well i sort of know why, because they render things differently but i have looked in my code and cant figure out why it will be different for ff click here NEWB here. Working on a project that has a custom ul w/ background images and sub menus the css currently in place works for all browsers except IE when using the IE developer tool, I can see all the applied styles for the items. For some reason IE is just randomly throwing in a padding-top from somewhere that's screwing up the alignment. There is NO source css file referenced or noted as to where it's coming from. As soon as it's removed, it display properly. I have explicitly set the style in the UL and the li to have the correct padding, but IE just seems to ignore them and throws in a padding of it's own. ANY IDEAS here? Anyone? Beuller? I have pulled my last hair so I come to you with a red face. these tags are in the head section Code:
h3 {color: blue}
pink {color: blue}
In the body I have Code: <h3> what color is it? </h3><BR> <pink> it should be blue </pink> both lines print in blue on FF. IE6 shows h3 in blue but pink is plain, black text. Please embarass me with a simple answer. Thanks in advance, stujo I am new to style sheets, and I have been trying to get an entry level position with a web developer here close to me. They sent me a PSD and told me to layout using nothing but CSS and no tables. So I did so... and it looks fantastic in Firefox, but not at all good in IE. The only real problem is with the positioning.. the content color and size and everything seems to be fine.... all the positioning is done in the code on the website, where you can view source... I pasted the CSS code below, but doubtful it will help much. Can anyone offer me some help? The site is he http://www.eomnis.com/test the style sheet is here http://www.eomnis.com/test/css.css and i pasted the style sheet code below. Thanks for any help everyone. Aaron <style type="text/css"> body { background-image: url('images/main_background.jpg'); background-color:#000000; background-repeat: no-repeat; margin: 0px; } .top_text { font-size: 14px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFF00; font-weight:400; } .bold_grey{ font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#EEEEEE; font-weight:300; letter-spacing:inherit; } .small_text{ font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#EEEEEE; font-weight:300; letter-spacing:inherit; } form { font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:10px; font-weight:300; } .select { font-size:9px; height:15px; } .input { font-size:9px; height:16px; width:160px; } .zip { width: 94px; height:16px; font-size:9px; } .Footer_links{ color:#CCCCCC; font-size:14px; font-weight:300; text-decoration:none; } </style> is there anything special i need to do to get CSS to work with IE? Here is what i have above the </head> tag Code: <link rel="stylesheet" type="text/css" href="layout.css"> the layout.css has: Code:
catheader {
color:#ffffff;
font-size: 14px;
font-weight: bold;
font-family: verdana;
}
then in the <body> i have Code: <catheader>My New Category</catheader> In netscape it shows correctly, in IE it doesnt read it at all. any ideas? I have the following CSS that I believe is valid, but it only works in IE. In fact in IE it works perfect, but in FireFox it does not display anything at all. Code: <div style="font-size:8px; text-align:left; background-color:red; width:100px;"><div style="font-size:8px; background-color:green; width:75px;"></div></div> What I am trying to do is display a rating. In the above example, the rating is 75/100, so a green bar 75px long over a red bar 100px long. I have the following CSS: Code:
#leftcontent
{
position: absolute;
top: 135px;
left: 20px;
width: 150px;
border: 0px;
}
#centercontent
{
border: 1px solid #999999;
top: 135px;
margin-left: 170px;
margin-right: 140px;
}
html>body #centercontent
{
margin-left: 170px;
margin-right: 140px;
}
#rightcontent
{
position: absolute;
top: 135px;
right: 20px;
width: 120px;
border: 0px;
}
This works just fine in Firefox, but I see some problem in IE6. As I resize the width of IE window, the right border line of the center content disappears. Maybe this CSS has some problem; maybe html inside has some problem. I don't know exactly what is causing this, but I need to fix it. I don't want the right border line to disappear. I want it to be visible at all times. How can I fix this problem? How can I make the right border line visible at all times? (This is where I use this CSS.) hi The following CSS code works in Firefox, but not IE. The site has a fixed top bar using CSS which works perfectly in firefox, but stuffs up in IE. Does anyone know what I need to change it to to fix the problem? Code: html, body
{
margin: 0;
padding: 0;
height:100%;
max-height:100%;
font-size: 90%;
font-family: verdana, sans-serif, arial, helvetica;
background-image: url('images/gradient.jpg');
background-repeat: repeat-x;
background-color:#fff;
}
#header
{ position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
z-index: 1;
height: 50px;
margin-bottom: 2em;
background-image: url('images/gradient2.jpg');
background-repeat: repeat-x;
}
#topmenu
{
position: absolute;
left: 250px;
top: 30px;
width:560px;
}
#stats
{
position: absolute;
right: 15px;
top: 5px;
text-align: center;
}
#gutter
{
float: left;
width: 3%;
height: 1px;
}
#col
{
float: left;
width: 70%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#rescol
{
float: left;
width: 94%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#rescol a {
text-decoration:none;
}
#rescol td {
text-align: center;
}
#col1
{
float: left;
width: 45%;
margin-bottom: 1em;
border-right: 1px solid #ccc;
padding-right: 3%;
margin-top: 5.5em;
}
#col2
{
float: left;
width: 15%;
margin-left: 3%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#col3
{
position: absolute;
right: 30px;
margin-left: 3%;
margin-bottom: 1em;
margin-top: 5.5em;
}
#footer
{
clear: both;
height: 50px;
padding: .5em;
font-size: 11px;
}
#footer ul {
border-top: 1px solid #ccc;
margin: 0;
padding: 1em 0 0 0;
list-style: none;
}
#footer li a, #footer li span {
display: block;
float: left;
padding: 5px 1em;
border-right: 1px solid #ccc;
}
#footer li span.copyright {
border-right: none;
}
a:hover {
color: #003;
}
h1
{
margin: 0;
padding: .5em;
}
h2
{
margin: 0;
}
hr.c {
border: none 0;
border-top: 1px solid #ccc;
width: 100%;
margin-bottom: 10px;
text-align: center;
height: 1px;
}
<!--[if IE 6]>
body
{
overflow: hidden;
}
div.content
{
height: 100%;
overflow: auto;
}
<![endif]-->
Fixed. Here's the css code. Code:
.toolbar a:hover, .toolbar a:focus, .toolbar a:active {
background-color:#F5F9FA;
}
.toolbar {
border:0;
padding:0;
margin:auto;
border-collapse:collapse;
}
.toolbar a {
display:block;
text-align:center;
vertical-align:middle;
white-space:nowrap;
}
.toolbar a:hover, .toolbar a:focus, .toolbar a:active {
text-decoration:none;
}
It works fine when you hover over a link, it lights up the back of the td which is what I want. However I would like the whole td to act as a link. So wherever you move the mouse over the td it lights up and would link to the page, instead of just over the text. Any suggestions? I've seen this type of nav bar on different websites and have tried to figure out how it's used, but I don't know what I'm looking for. An example is on the Twidroyd site (you can google it--as a new user I can't post links) The nav bar image is three bars stacked one on top of the other, where there are bars for inactive, active, and hover. I can't figure out how this works. Not necessarily asking for a detailed explanation, just what the technique is called so I can research it myself. Any help appreciated! |
|||||||