CSS - Css Doesn't Work In Ie, Works Fine In Ff And Chrome

I am a bit of a loss as to why the menu on this page http://www.laurieannre.com/welcome.asp looks great on IE but not in other browsers. If it is not too much trouble and someone can be of some assistance I'd appreciate it. Tom

I dont get why but codes below work fine with firefox but in IE image overflows from <li> area. How can I fix it?

Code:

 

<style>

#splitcontentright { 
 float:right;
 margin:2px;
 width:346px;
 height:225px;
 background:#FFFFFF url(images/nheadlines_bg.gif) top no-repeat;
}
#splitcontentright h1 {
 padding:0px;
 margin:0px;
 font-size:14px;
 font-weight:bold;
 background-color:inherit;
 color:#FFFFFF;
}
#splitcontentright .news img {
 float:left;
 height:60px;
 width:60px;
 margin:4px 4px 4px 4px;
}
#splitcontentright .news{
 border-top:none;
 background-color:#e8e8e8;
 margin:0; 
}
#splitcontentright .news li a{
 display:block;
 text-decoration:none;
 padding:0px;
 color:#000000;
 border-top:#FFFFFF 1px solid;
}
#splitcontentright .news li a:hover{
 background-color:#FFFFFF; 
}

</style>



   <div id="splitcontentright">
       <h1>News Headlines</h1>
    <ul class="news">
     <li><a href="#"><img src="images/nheadlines_pic.jpg" class="news" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore                 magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></li>
     <li><a href="#">2Lorem ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>  
     <li><a href="#">L3orem ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>  
     <li><a href="#">Lor5em ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>  
     <li><a href="#">Lore6m ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li> 
     <li><a href="#">Lo4rem ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>  
     <li><a href="#">Lor5em ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>  
    </ul>
   </div>

Hey guys, I'm new to web design, and I've begun putting together a template for the basic aspects of my page. Everything works fine in FireFox but nothing but the background shows up in IE. It's very frustrating because I have a feeling it's something small but I don't know what that thing is. Here is the link to the template I'm working on : thehempdaddy.com/unfinished/newdesign.html

Any help pointing me in the right direction will earn you a friend for life.

I am trying to center an inline list navigation inside the div. I think I got it. It works in FF, Safari, Opera but there is an extra space in IE therefore it does not center correctly.

Here is the URL
http://holzgreen.com/gap/gap_sun_catchers.html

Here is the CSS
.gapLayout #kit_groupPerfect ul {
display:inline-block;
list-style:none;
padding:0px;
margin:10px 0 0 0;
height: 23px;
text-align: center;
border: 1px solid #666666;
}

.gapLayout #kit_groupPerfect ul li {
float:left;
margin: 0px 7px 0 7px;
text-align:center;
font: bold 11px arial, verdana, sans-serif;
height: 11px;
padding: 5px 5px 6px 5px;
background-color: #EEE;
}

As always, any suggestion will be appreciated.

sukruB

Hi Guys

I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website.

I am using the latest mac OS and latest versions of all browsers.

The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this.

Here is the code for the form...

<form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" >


<ul>
<li>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="required" />
</li>




<li>
<label for="email">E-mail:</label>
<input name="email" id="email" type="text" class="required email" />
</il>


<li>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" class="required" />
</li>

<li>
<label for="detail">Message:</label>
<textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea>
</li>


<li>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" />
</li></ul>

</form>

Here is the css for that page...

#content_about {
color: #666666;
}



/***************************************************
CONTACT
***************************************************/
#form {
margin: 0px;
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 15px;
float: left;
}
#form div {
width: 510px;
position: relative;
float: left;
padding-bottom: 9px;
}
#form div label {
width: 400px;
}
#form div label.error {
color: #a80000;
position: absolute;
top: 0px;
right: 0px;
text-align: right;
font-size: 11px;
}
#form div.message_sent {
background-color: #31B8DA;
width: 890px;
float: left;
padding: 10px;
margin-bottom: 15px;
color: #FFFFFF;
}
#form input {
width: 499px;
padding: 8px;
font-size: 13px;
color: #999999;
background-color: #FFFFFF;
float: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
}
#form input:focus, #form textarea:focus {
background-color: #F4F4F4;
}
#form textarea {
width: 500px;
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #FFFFFF;
color: #aaaaaa;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
float: right;
margin: 0px;
}
#form .submitBtn {
background-color: #31b8da;
width: 95px;
color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
font-size: 16px;
height: 35px;
display: block;
margin-top: 20px;
}
#form .submitBtn:hover {
background-color: #1F93B4;
color: #FFFFFF;
}
#form .submitBtn:focus {
background-color: #4FC1E1;
}

#form strong {
font-size: 24px;
color: #FFFFFF;
font-weight: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6a6a6a;
display: block;
}
#form .font-11 {
font-size: 11px;
color: #CCCCCC;
display: inline;
}
#content_about #form li label {
margin-top: 0px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 30px;
}
#content_about #form li {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 0px;
}


Any help would be greatly appreciated.

Regards

Jay

Re-coding a site I designed to follow web-standards and having a small problem with a gap in ie.
Page-template
Page is working fine in firefox, but in internet explorer the "content" div is getting pushed down from the "framemain" div. I set padding and margin all to 0 and that didn't help. I could get around this if I abs position my nav, but I'd rather do it this way. Any thoughts or help appreciated.

(The relevant subset of my) website is he
http://www.smoli.com

(URL address blocked: See forum rules)

It was designed using FrontPage 2003 (I know, I know - but it was a long time ago and it was the only thing I had access to at the time...).

Everything works fine in:
- Preview from within FP.
- IE8 and IE9
- Latest version of Chrome.

But not with Firefox (latest version).

Problem is that the table doesn't seem to resize to the screen size, and the scrolling of the logos at the bottom are "all over the place".

I am pretty new to CSS, and the code the scrolling logos was inserted as is from (URL address blocked: See forum rules)

Any idea what is causing the incompatibility?

Many thanks.

I have a three column layout (25%, 50%, 25%) which works fine in IE7 and firefox but not IE6. In IE6 the right column rolls down (would not fit in the space). What would be the best fix for this issue ?

Here is my CSS.
#main3Column {
float: left;
width: 50%;
}

#leftColumn {
/* IE7 1px rounding error */
float:left;
width:25%;
margin-left:-1px;
}

#rightColumn {
float:left;
width:25%;
}

.columnBoxLeft {
padding: 0px 0px 0px 6px;
margin: 5px 0px 5px 0px;
}

.columnBoxMiddle {
padding: 0px 5px 0px 5px;
margin: 5px 0px 5px 0px;
}

.columnBoxRight {
padding: 0px 5px 0px 0px;
margin: 5px 0px 5px 0px;
}


HTML
====
<div id="leftColumn">
<div class="columnBoxLeft">
<h2 class="channeltitle">Left Column</h2>
<p>Your Text Here</p>
</div>
</div>

<div id="main3Column">
<div class="columnBoxMiddle">
<h2 class="channeltitle">Main Column</h2>
<p>Your Text Here</p>
</div>
</div>

<div id="rightColumn">
<div class="columnBoxRight">
<h2 class="channeltitle">Right Column</h2>
<p>Your Text Here</p>
</div>
</div>

if you take a look at http://www.cherrysociety.com/mag/art/

you'll see it works fine in IE, but when it is viewed in firefox it's so messed up. can anyone help me? tell me what i've done wrong?

the css is at http://www.cherrysociety.com/mag/style.css

thanks guys, i appreciate it a lot.

Hello.
I am using a percentage bar javascript code on my website, the problem is, The script works fine in FireFox without adding:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

But only works in IE if I add that code.
The problem is, when I do add that code some of my tables go twice the size in height.

What is the problem here?
Is this going to be easy to fix?
What can I do?

Thanks a lot,
Ben

I just finished an element for a redesign of my website. I open it in Firefox, working. I open it in Safari (for Windows), fine. I open it in IE, I almost cry.

My entire page is screwed up! I can't tell if it's the floats, the margins, the lists (I think it's the lists).

Anyways, does anyone know whats wrong so I could fix it?

http://www.politinks.com/topbar

Any help would be appreciated. Thanks!

I want this menu bar to be at the very top of the page, in IE it looks fine but in Chrome the text is below the box, any ideas would be appreciated?

Code:

<html> <head> <style type="text/css"> .people { position:absolute; right:0px; top:0px; width:300px; height:25px; background-color:#E4E4E4; vertical-align:super; } </style> <title>home | account | about | help</title> </head> <body> <div class="people"> <p><b><font color="#0077CC" face="Arial" size="2">home</font></b><font face="Arial"> <font color="#CCCCCC">|</font> </font><b> <font color="#0077CC" face="Arial" size="2">account</font></b><font face="Arial"> <font color="#CCCCCC">|</font> </font><b> <font color="#0077CC" size="2" face="Arial">about</font></b><font face="Arial"> <font color="#CCCCCC">|</font> </font><b> <font color="#0077CC" face="Arial" size="2">help</font></b></p> </div> </body> </html>

Hi all,

I have a problem in scaling images, I re-size all images by -50% to make them act as thumbnails at the following address:

http://www.magic-photography.co.uk/photoselector.html

It works fine in Chrome using the following simple CSS:

Code:

a img { border: none; height: 50%; width:auto; text-align: left; }

however in IE/Firefox the images do not re-scale at all.

Very very grateful for any help offered.

Thanks

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