Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS quirks - need some help

    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/...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/.../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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Remove all of that whitespace before the doctype. Thats putting IE into quirks mode.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    To get the search function aligned correctly, remove the empty legend tag.
    .
    .

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by athanasiusrc; 08-04-2007 at 04:44 PM. Reason: Gave wrong answer about legend tag.

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.
    Quote Originally Posted by athanasiusrc View Post
    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:
    Code:
    #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.

    Quote Originally Posted by athanasiusrc View Post
    http://www.catholicchurchsupply.com/...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:
    Code:
    <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>

  • #6
    New Coder
    Join Date
    Aug 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/.../Category/1859

  • #7
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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.

  • #8
    New Coder
    Join Date
    Aug 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Got rid of all the tables on those pages and remembered the "clear" value for css. That fixed the problem.

    Thanks for your help.

  • #9
    New Coder
    Join Date
    Aug 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've got one more bit of quirkyness.

    http://www.catholicchurchsupply.com/...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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •