CSS - Ie7 And Lower Compatibility Issue..

I have a drop down menu that is working fine in FF 3.5 but not in IE 7. Will you please have a look at it and help me find out where the conflict is? I am thinking it is a CSS issue but it may also be a javascript issue. The menu is he

http://bit.ly/42iVkG

and the menu script I used is he

http://bit.ly/4pvcXj

Thank you.

Here are a couple of questions, all are in reference to THIS LAYOUT

1) There seems to be an Internet Explorer issue where bullets don't always show up on list items, any ideas how to fix this?

2) It wont validate in XHTML simply because of two urls I use, anyone have any hacks as to how to fix this?

3) I've only been able to test on IE and Firefox, so if anyone is on a different browser and can let me know of any other issues it would be amazing.

Thanks in advanced!

If I set a height for my LIs, then IE does not increment the list item. It shows a. a. a. a. instead of a. b. c. d.

Actually it's the same for any list-style-type. It never increments the list-type, even when it's just the default style.

I couldn't find any other mention of this anywhere.

Does anybody know what causes this bug, or if there's a way to fix it?

Here is some code to reproduce:
Code:

/* CSS */
#qform ol {
            list-style-type:lower-alpha;
            }

#qform ol li {
               color:#333;
               height:25px;
               margin:10px 0;
               padding:0 0 0 20px;
               }

#qform ol li input {
                     margin:3px 5px 0 0;
                     }

#qform ol li label {
                     margin:0;
                     }

<!-- HTML -->
   <form id="qform" action="index.php" method="post">
    <fieldset>
     <ol>
      <li>
       <input type="radio" id="rada" name="answer" value="a" /><label for="rada">Once</label>
      </li>
      <li>
       <input type="radio" id="radb" name="answer" value="b" /><label for="radb">Twice</label>
      </li>
      <li>
       <input type="radio" id="radc" name="answer" value="c" /><label for="radc">Three Times</label>
      </li>
      <li>
       <input type="radio" id="radd" name="answer" value="d" /><label for="radd">A Lady</label>
      </li>
     </ol>

     <input type="submit" value="OK" />
    </fieldset>
   </form>

In IE6, that will display a list with a, a, a, a. Remove the height from #qform ol li and it works as it should.

Thanks,

When I use a the page title as a link, to go to a category or external page, in WordPress (most recent version) the page title with a link rather than just text in the title, gets moved about 3px down in stead of staying in line with the rest.

I am using the Graphpaper Press Gridline Lite theme.
the Website is gregdelima.com
and the relevant CSS is: gregdelima.com/wp-content/themes/gridline_lite/gridline_lite/style.css

Thanks for taking the time to read my question,

I want to hide this line from IE6 and lower
Code:

padding: 0px 0px 0px 12px;

Is there something I can do to it to hide it? I need it to work in IE7, FF etc.

I'm looking on line, but I guess I'm not typing in the correct search terms, as I'm not coming up with anything.

Thanks,

Brad

Hi there,

I have a form with a text field and a submit link (text), however in IE, the link appears lower down than in FF. Ideally I would like to have the link vertically centered to the text field.

This is a screen shot of what I mean.




Any ideas how I can sort this out?

Hi everyone,

In high resolution settings (like 1600x900) this layout looks great. But, on 1280 x 720 the layout gets all screwed up.

Can someone look at the CSS below and let me know where I'm screwing up? Thanks!

The site is romanceplaybook dot com and here is the CSS:

body {
background: #ffffff url(images/bkgd.jpg) top repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: #ffffff url(images/bg.jpg) top center repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px 300px 0px;
padding: 0px;
}

/************************************************
* Hyperlinks *
************************************************/

a, a:visited{
color: #507AA5;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************************************************
* Header *
************************************************/

#header {
background: #FFFFFF;
width: 1000px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
text-align: center;
text-transform: uppercase;
}

#header a {
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 48px;
color: #333333;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

#header a:hover{
color: #333333;
}

/************************************************
* Navbar *
************************************************/

/************************************************
* Left Sidebar *
************************************************/

#l_sidebar {
float: left;
width: 160px;
margin: 0px 20px 0px 0px;
padding: 20px 0px 20px 0px;
}

#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}

#l_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#l_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#l_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Right Sidebar *
************************************************/

#r_sidebar {
float: right;
width: 160px;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
}

#r_sidebar p{
padding: 2px 0px 16px 0px;
margin: 0px;
line-height: 20px;
}

#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#r_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#r_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#r_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Content *
************************************************/

#content {
width: 950px;
margin: 0px auto 0px;
padding: 0px;
}

#content p{
padding: 0px 0px 15px 0px;
margin: 0px;
line-height: 20px;
}

#content p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

#content h1 {
color: #333333;
font-size: 22px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: normal;
padding: 0px 0px 0px 0px;
margin: 0px;
}

#content h1 a {
color: #333333;
text-decoration: none;
}

#content h1 a:hover {
color: #658DB5;
text-decoration: none;
}

#content h2 {
color: #333333;
font-size: 14px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: bold;
padding: 5px 0px 5px 0px;
margin: 0px;
border-top: 1px dotted #C0C0C0;
border-bottom: 1px dotted #C0C0C0;
}

#content p ol{
margin: 0px;
padding: 0px 0px 0px 20px;
}

#content p ul{
margin: 0px;
padding: 0px 0px 0px 20px;
}

blockquote{
margin: 0px 0px 0px 25px;
padding: 0px 25px 0px 10px;
font-style: italic;
color: #666666;
border-left: 3px solid #B3C8DB;
}

#content blockquote p{
margin: 0px 0px 20px 0px;
padding: 0px;
}

#contentmiddle {
float: left;
width: 550px;
margin: 0px 0px 0px 0px;
padding: 20px 5px 10px 20px;
text-align: left;
}

#contentmiddle p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

.contentdate {
background: #FFFFFF url(images/date.gif);
float: left;
width: 45px;
height: 50px;
margin: 0px;
padding: 0px;
}

.contentdate h3 {
color: #FFFFFF;
font-size: 10px;
font-weight: normal;
padding: 1px 0px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

.contentdate h4 {
font-family: Times New Roman, Helvetica, Sans-Serif;
color: #999999;
font-size: 21px;
font-weight: bold;
padding: 5px 4px 0px 0px;
margin: 0px;
text-align: center;
}

.contenttitle {
float: left;
width: 480px;
margin: 0px;
padding: 0px 0px 0px 10px;
}

#contentmiddle ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#contentmiddle ul li a {
color: #507AA5;
text-decoration: none;
}

#contentmiddle ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

#content img.wp-smiley {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

#content img.wp-wink {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

.postspace {
background: #EFEFEF url(images/spacer.gif);
width: 440px;
height: 32px;
margin: 0px;
padding: 0px;
}

/************************************************
* Footer *
************************************************/

#footer {
background: #FFFFFF;
width: 952px;
margin: 0px auto 0px;
padding: 10px 0px 10px 0px;
text-align: center;
border-top: 1px solid #C0C0C0;
}

/************************************************
* Search Form *
************************************************/

#searchdiv {
margin: 0px;
padding 0px;
}

#searchform {
margin: 0px;
padding: 0px;
overflow: hidden;
}

#s {
width: 190px;
background: #EFEFEF url(images/search.gif);
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
padding: 3px;
margin: 8px 0px 0px 0px;
border: 1px solid #C0C0C0;
}

/************************************************
* Comments *
************************************************/

#commentblock {
width: 395px;
background: #EFEFEF;
color: #333333;
float: left;
padding: 10px 20px 0px 20px;
margin: 10px 0px 10px 0px;
border: 1px solid #C0C0C0;
}

ol#commentlist {
padding: 5px 0px 5px 0px;
margin: 0px;
list-style-type: none;
}

.commentdate {
font-size: 12px;
padding-left: 0px;
}

#commentlist li p{
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

.commenttext-admin {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

#commentsformheader{
padding-left: 0px;
}

#commentsform{
text-align: left;
margin: 0px;
padding: 0px;
}

#commentsform form{
text-align: left;
margin: 0px;
}

#commentsform p{
margin: 0px;
}

#commentsform form textarea{
width: 99%;
}

p.comments_link img{
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Good Day,

Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem?

Best,
Colin

A friend told me that css websites are sometimes displayed wrong with some browsers; the tables are out of place etc. Is this true? are there any issues with certain sites?

Is css the best way to design an html site now a days?

Sorry im a newbie in this, Im going to start learning soon. Thanks !!!

I just finished a layout using CSS and I'm aware that browsers 4.0 and earlier (or is it 3.0 and earlier?) won't be able to display it right. However, I also know that the browsers that do support CSS don't all display it the exact same way. I tested my layout using Internet Explorer 6 and Mozilla 1.6. I had to make a few changes to get Mozilla to display it close to what I intended. My question: which other browsers and versions should I test it on?

Okay I have this website www.deminyx.com and It looks decent in Google Chrome but stupid in IE my #content div is in a different place, can anyone help me clean up my code. I validated the HTML and CSS with the w3c validator too! UGHH lol!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Deminyx| Web Solutions</title><link rel="stylesheet" href="index.css" type="text/css">



</head><body>
<div id="header"><a href="index.html">&nbsp;Deminyx</a></div>
<div id="side">
<table>
<tbody>
<tr>
<td><a href="service.html">The Service</a></td>
</tr>
<tr>
<td><a href="cost.html">The Cost</a></td>
</tr>
<tr>
<td><a href="ease.html">The Ease</a></td>
</tr>
</tbody>
</table>
</div>
<div id="content">This is my content, I wont waste your time.</div>
</body></html>

and the CSS

Code:

body {
background-color:#666;
}

#header {
background-color:#399;
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-size:7em;
border-style:solid;
border-width:2px;
}

a:hover {
font-family:Arial,Helvetica,sans-serif;
background-color:#399;
}

a {
text-decoration:none;
color:#000;
font-size:1em;
line-height:1em;
}

table {
border:solid #000;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
line-height:2.2em;
width:20%;
font-size:1.5em;
margin-top:12px;
padding:2px 2px 2px 19px;
}

#content {
position:relative;
float:right;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
width:78%;
font-size:1.2em;
margin-top:-160px;
border-style:solid;
padding:4px 4px 4px 8px;
}

I have always encountered problems trying to get my sites to work in IE6, mainly because it renders the margins as 2x the "right value".

However I am curious: How does deliciousdays.com work perfectly in IE6 without using if IE6 conditional tag?

I am making a site and this would be very useful. I try not to use the if IE6 conditional tag hack if possible.

Just testing my new design on IE6 and it doesnt quite work.
The table at the top of each category where it says "RW::Scripts" and "New Category" should fill the top of the frame 100% but it doesnt.

You can see it in action here http://www.rwscripts.com/testsite/index.php

It works fine in Firefox just not IE

Heres the stylesheet that I am using

Code:

body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.tableborder{ 
	border: 1px solid #000000;
	background-color: #FFF; 
	padding: 0px; 
	margin: 10px 20px 0px;
}
.debugborder{ 
	border: 1px dashed #000000;
	background-color: #eeeeee; 
	padding: 5px; 
	margin: 10px 20px 10px;
}
.tablefooter {
	background: #A0BED3;
	padding: 2px;
	height: 29px;
	border: 1px solid #000000;
}
.tabletitle {
	height: 29px;
	border: 1px solid #000000;
}
.tableheader {
	font-weight: bold;
	color: #5285A2;
	height: 23px;
	border: 1px solid #000000;
	background: #A0BED3;
}
.mainrow {
	background: #EAEAEA;
}
.subfooter {
	font-weight: bold;
	background: #92ACBE;
	height: 29px;
}

.statHead {
	font-size: 12px;
	font-weight: bold;
	background: #004080 center;
	height: 20px;
	text-align: left;
	vertical-align: middle;
	padding: 4px;
	border-top: 0px solid #999999;
	border-right: 0px solid #999999;
    border-bottom: 1px dashed #999999;
	border-left: 0px solid #999
}

.statRow {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	background: #006699;
	border-bottom: 1px dashed #999999;
	padding: 2px;
}

.ucpmain {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	border: 1px solid #cccccc;
	padding: 0px;
}

.ucpon {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
	background: #006699;
	border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
	padding: 2px;
    height: 25px;
}

.ucpoff {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
	background: #004080;
	border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
	padding: 2px;
    height: 25px;
}

.copyright{ 
	font-family: Verdana, Tahoma, Arial, Sans-Serif; 
	font-size: 11px; 
	line-height: 12px;
	text-align: center;
}

.purple { color:purple;font-weight:bold }
.red    { color:red;font-weight:bold }
.green  { color:green;font-weight:bold }
.blue   { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }

I have CSS that works great in FF, but then when I go to check it all out in IE, it looks like s it (if you know what I mean...)

Heres my CSS:
Code:

input.submitbutton
{
   color:#FFFFFF;
   background-color:#33CC00;
   background-image:url(../images/buttonbg.gif);
   border: 1px solid #598527;
}

(The image tags arent working I guess, so heres the links to them...)

and heres the outcome in FF
http://img214.imageshack.us/img214/1048/coolffkw9.png

and then the outcome in IE...
http://img214.imageshack.us/img214/342/ffof5.png

I think it does this because the buttons in IE get rendered the same as windows vista does it, and in firefox they are rendered differently? I'm not sure. Anyway, how can I fix this horrible mistake to make it look the same as it looks in Firefox? Thanks a lot guys.

I've decided to make a thread to ask for help on my journey of recoding my design to CSS/XHTML tableless. I understand you all do this out of the goodness of your hearts, so I hope you don't take this as a "I demand assistance" thing.

(original layout -> Here )

http://www.gaminghybrid.com/wii-style.html

The current issue is the menu items. In FireFox 2, it looks perfect. The right proportions and everything. However, in IE7, between the menu header and the first menu item, there is some strange spacing. What could be causing this? For now, all my CSS is on the page, where I'll have it be in a CSS file once I've completed.

Thanks in advance It's about time I moved away from the incorrect table layouts and help contribute to a better web.