Styling IE problem

Hello

Please have a look this site in IE on windows....it looks terrible!
http://www.creditcardcompare.com.au/

On Firefox and Safari on mac....no problem but IE there is a problem with the CSS.

As you can see the menu's float to the right and any rollover on anything on the page, everything gets a underline.

The header file has been checked and is good.

Any ideas? If anything needs to be clarified then I will try to do so as much as needed.

 

That is some very poorly structured markup. Debugging would be a mess, even if it weren't full of errors. Further, it seems one of your style sheets is not where it's expected to be, css validator.

Most of the html errors are the same ones repeated, or there is a structural error early on that throws everything else out of sync.

Get the markup and file path fixed, and if there's still a problem, we'll have an easier time locating the cause.

cheers,

gary

 

Hello,

Add this line to your css

text-align: left;

HTML:

in

	ul.sidebarlist {
	list-style-type: none;
	padding: 0 0 0 0px;
	margin: 10px 0;
	font-size: 10pt;
	font-family: "Helvetica", "Tahoma";
	text-align: left;
	}

HTML:

This will fix the alignment of the text in the menu. I don't know what's with the little > images.. I couldn't duplicate that thing locally because I don't have the image. Could you give me its name?

 

Oh, I've found the little > image. To get rid of it, replace

li {  
list-style-image: url(../img/b3-spacer.gif); 
font-size: 11px; 
font-family: Helvetica, sans-serif;
}

HTML:

with

li {  
font-size: 11px; 
font-family: Helvetica, sans-serif;
}

HTML:

Let me know how that goes

P.S I didn't notice any underlines on rollovers in IE7

 

kk5st - I agree the whole site is less than adequate in terms of its coding...but we're getting there. Your remarks are totally warranted - its a bit of a mess!

Thanks to 9450184 - I've implemented your fixes except for the rollovers.

 

I'm reminded of my mother telling me that if I didn't let my room get messy in the first place, I wouldn't have to spend all day Saturday cleaning it. I'm also reminded that I didn't listen all that well back then.

cheers,

gary

 

Heck, I still don't know how to listen : ) I repeat my mistakes regularly.

David, here's also an example of something that is perfectly valid, but extra bloatacious where you can make your HTML smaller:

	<div class="innerdiv">
										<ul class="sidebarlist">

					<li>
					<a href="american-express-credit-cards.php" class="menubank" title="American Express">American Express</a>
					</li>
					</ul>
										<ul class="sidebarlist">
					<li>
					<a href="anz-credit-cards.php" class="menubank" title="ANZ">ANZ</a>
					</li>

					</ul>
										<ul class="sidebarlist">
					<li>
					<a href="aussie-credit-cards.php" class="menubank" title="Aussie">Aussie</a>
					</li>
					</ul>
										<ul class="sidebarlist">
					<li>

					<a href="bankwest-credit-cards.php" class="menubank" title="BankWest">BankWest</a>
					</li>
					</ul>
										<ul class="sidebarlist">
					<li>
					<a href="citibank-credit-cards.php" class="menubank" title="Citibank">Citibank</a>
					</li>
					</ul>

										<ul class="sidebarlist">
					<li>
					<a href="commonwealth-bank-credit-cards.php" class="menubank" title="Commonwealth Bank">Commonwealth Bank</a>
					</li>
					</ul>
										<ul class="sidebarlist">
					<li>
					<a href="hsbc-credit-cards.php" class="menubank" title="HSBC">HSBC</a>

					</li>
					</ul>
										<ul class="sidebarlist">
					<li>
					<a href="macquarie-bank-credit-cards.php" class="menubank" title="Macquarie Bank">Macquarie Bank</a>
					</li>
					</ul>
										<ul class="sidebarlist">

					<li>
					<a href="nab-credit-cards.php" class="menubank" title="NAB">NAB</a>
					</li>
					</ul>
										<ul class="sidebarlist">
					<li>
					<a href="st-george-credit-cards.php" class="menubank" title="St George">St George</a>
					</li>

					</ul>
										<ul class="sidebarlist">
					<li>
					<a href="wizard-credit-cards.php" class="menubank" title="Wizard">Wizard</a>
					</li>
					</ul>
							</div>

Code (markup):

Se that every ul inside the div called "innerdiv" has the same class. That class then could be completely removed, and the CSS can go like this:
.innerdiv ul {
stuff;
}

That will apply to all ul's inside that div (and any ul inside any other div with that class).
Leaning down the HTML and css also makes it much easier to find bugs.

 

Speaking of bloatosity, there is no sane reason to create a potload of lists, each containing one item.

	
<div class="innerdiv">
  <ul class="sidebarlist">
    <li>
      <a href="american-express-credit-cards.php">American Express</a>
    </li>

    <li>
      <a href="anz-credit-cards.php">ANZ</a>
    </li>

    <li>
      <a href="aussie-credit-cards.php">Aussie</a>
    </li>

    <li>
      <a href="bankwest-credit-cards.php">BankWest</a>
    </li>

    <li>
      <a href="citibank-credit-cards.php">Citibank</a>
    </li>

    <li>
      <a href="commonwealth-bank-credit-cards.php">Commonwealth Bank</a>
    </li>

    &#8230;
  </ul>
</div>

Code (markup):

And, if the title attribute simply echos the anchor text, it isn't needed.

cheers,

gary

 

Everything except the rollover is ok in IE now =)

 

looks ok to me