...

View Full Version : CSS quirks - need some help



athanasiusrc
08-04-2007, 04:03 PM
I am working on a new site and trying to use style sheets instead of tables in many places. The problem I am having is that IE and Firefox don't render the same way and I can't figure out how to fix a few problems.

The site is at www.catholicchurchsupply.com.

Here are the problems and specific pages where they are.

www.catholicchurchsupply.com
1)Firefox doesn't display the top tabs properly. The left side is only as tall as the text.
2) IE doesn't display the search box in the middle of the bar. It drops below the bottom.

http://www.catholicchurchsupply.com/index.cfm/FuseAction/store.viewCategory/Category/1770/
1) IE shoves the new stuff off to the side instead of putting it nicely under the featured item.

http://www.catholicchurchsupply.com/index.cfm/FuseAction/store.BrowseCategory/Category/1859
1) Both IE and Firefox let the images wander outside of their areas forcing other images to the right and text to not line up properly with the images after the first one for tall images.

I obviously have enough css knowledge to be dangerous but not enough to figure out these probably obvious problems.

Thanks for the advice.

_Aerospace_Eng_
08-04-2007, 04:07 PM
Remove all of that whitespace before the doctype. Thats putting IE into quirks mode.

Jutlander
08-04-2007, 04:12 PM
To get the search function aligned correctly, remove the empty legend tag.

athanasiusrc
08-04-2007, 04:35 PM
Getting the doctype to the very top of the page didn't help. (I downloaded the source and removed the last blank line at the top and reloaded in IE. No change.)

Removing the legend tag seems to have fixed the search box. Thanks!

Other ideas?

koyama
08-05-2007, 01:17 AM
Remove all of that whitespace before the doctype. Thats putting IE into quirks mode.
Hmm... I didn't see the original code, but I don't think that IE6/7 will go into quirks mode if there is just white space before the document type declaration.

www.catholicchurchsupply.com
1)Firefox doesn't display the top tabs properly. The left side is only as tall as the text.

Firefox is rendering correctly. It is IE that is rendering incorrectly.

First of all, width and height do not apply to non-replaced inline elements such as a and span are by default. For example, this does not make sense:


#navigation ul li a {
background: url("images/leftUnFocusedTab.gif") #938DA5 left top no-repeat;
color: #FFFFFF;
height: 40px;
text-decoration: none;
padding-left: 6px;
font-size: 11px;
}
Also, IE6 and IE7 has a bug where a nested non-replaced inline element will expand an inline non-replaced parent. This is the bug you are relying on to get the desired appearance of the menu in IE.

To fix the problem I would perhaps try switching to a floated menu where you float li, a, and span instead of setting them inline. In that case you can set a height on the elements too.


http://www.catholicchurchsupply.com/index.cfm/FuseAction/store.viewCategory/Category/1770/
1) IE shoves the new stuff off to the side instead of putting it nicely under the featured item.

You first need to validate your HTML and fix coding errors. For example, you can't nest a form within a table like this:


<tr>
<td rowspan=2 valign="top">

<a href="index.cfm/FuseAction/Store.ItemDetails/SKU/11563/ImageSize/Lg/Category/1770index.htm"><img src="/items/11563sm.jpg" align="left" alt="Pyx with Pewter Design on top" border=0></a>


</td>

<td valign="top">
<p><b>Pyx with Pewter Design on top</b></p>
</td>
<form action="index.cfm/index.htm" method="POST">
<td valign="top">
<input type="image" src="/images/addbutton.gif" alt="Add To Order" align="absmiddle" onClick="form.submit()">
<input type="hidden" name="Category" value="0">

<input type="hidden" name="ItemNotes" value="">
<input type="hidden" name="FuseAction" value="cart.AddToOrder">
<input type="hidden" name="SKU" value="11563">
<input type="hidden" name="Qty" value="1">
</td>
</form>

</tr>

athanasiusrc
08-05-2007, 02:18 PM
That fixed the page with new and featured items. Thanks!

Now I just need to get the images to stop stairstepping to the right on this page:

http://www.catholicchurchsupply.com/index.cfm/FuseAction/store.BrowseCategory/Category/1859

garydarling
08-05-2007, 04:54 PM
Still too many html errors to bother playing with the layout. Run your site thru this first, http://validator.w3.org/, fix the errors they show, then try again.

athanasiusrc
08-06-2007, 05:27 AM
Got rid of all the tables on those pages and remembered the "clear" value for css. That fixed the problem.

Thanks for your help.

athanasiusrc
08-07-2007, 11:54 PM
I've got one more bit of quirkyness.

http://www.catholicchurchsupply.com/index.cfm/title/Sanctuary-Appointments/FuseAction/store.viewCategory/Category/1768/index.htm

In firefox the text in the featured area appears below the image. In IE 7 it appears next to it.

The new items display two to a row like I want in Firefox but in a single column in IE7.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum