Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Member bil2k's Avatar
    Join Date
    Dec 2005
    Posts
    50
    Member #
    12214
    If you guys mosey on over to one of my pages like this one in Firefox, it displays as I intended. View the same page in IE6, and the first paragraph's background and border styles have disappeared. If you then highlight a portion of the paragraph and deslect it, the style in the highlighted region appears.

    To reiterate the problem area is the P tag where you see "
    HTML Code:
    <p class="pinTypeIntro">Lasting Footprints is your source for"


    I've never seen anything like this before so any help is appreciated. Thanks

    Relevant HTML of the region:

    Code:
     
    <div id="pin">
      <div id="pinTL"><img src="../images/layout/pinTL.gif" alt="" width="13" height="26"></div>
      <div id="pinTR"><img src="../images/layout/pinTR.gif" alt="" width="13" height="26"></div>
      <div id="pinHead" class="head1">Varsity Lapel Pins</div>
      <div id="text">
        <p class="pinTypeIntro">Lasting Footprints is your source for  stock and custom designed pins for your varsity club or sports team. Don't be left behind at your school, college, or university.  Increase unity and show your support by proudly wearing a pin that represents your team, club, or activity. </p>
        <h2>Varsity Pin Sports Listing</h2>
        <p>Lasting Footprints sells stock pins for the following activities and clubs: </p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          (table code here blah blah blah)
        </table>
        <h2>Stock Varsity Pins Photos </h2>
        <div align="center"><img src="../images/pins/stock/chenille/Chenille1.jpg" width="679" height="398"><br>
          <img src="../images/pins/stock/chenille/Chenille2.jpg" width="700" height="452"><img src="../images/pins/stock/chenille/Chenille3.jpg" width="661" height="449"><img src="../images/pins/stock/chenille/Chenille4.jpg" width="703" height="464">
          </p>
        </div>
      </div>
      <!-- END div#text -->
      <br>
    </div>
    <!-- END div#pin -->
    CSS

    Code:
    .pinTypeIntro {
    	font-size: 1.2em;
    	background-color: #DEE7EF;
    	padding-top: 10px;
    	padding-bottom: 10px;
    	padding-left: 5px;
    	padding-right: 5px;
    	border-top: 1px dashed #666666;
    	border-bottom: 1px dashed #666666;
    }
    #pin h2 {
    	font-size: 100%;
    	color: #004964;
    	border-bottom: 1px dashed #004964;
    	padding-bottom: 2px;
    	
    }
    Full style sheets
    layout.css
    layout_category.css
    pins.css

  2.  

  3. #2
    Junior Member
    Join Date
    Jul 2006
    Location
    Somewhere in Germany
    Posts
    2
    Member #
    13601
    The problem is somewhere in your CSS and not the portion that you have printed.

    I took the liberty of looking at your entire CSS for the site and I haven't found the bug yet but it is something else that IE is seeing that Firefox does not.

    Using the CSS you posted above with the HTML you posted above everything worked correctly and I got the background and border even in IE.

    I'll edit this post if I find the actual culprit.

  4. #3
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Probably not what you wanted to here but clean up some of those errors and it might fix your problem.
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  5. #4
    Junior Member
    Join Date
    Jul 2006
    Location
    Somewhere in Germany
    Posts
    2
    Member #
    13601
    Quote Originally Posted by karinne
    Probably not what you wanted to here but clean up some of those errors and it might fix your problem.
    That was weird I ran it through W3C from my web developer extension and it passed as XHTML 1.0 Strict. I ran it from your link and it failed as HTML 4.01. I checked the source code and the doctype said HTML 4.01. I guess I'll have to have a look at that web developer of mine.

  6. #5
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    You presently have a HTML Loose DOCTYPE

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    If you want to use XHTML, change that DOCTYPE and that will probably fix your problem as well

    Recommended DTDs to use in your Web document.
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  7. #6
    Member bil2k's Avatar
    Join Date
    Dec 2005
    Posts
    50
    Member #
    12214
    Thanks for the tips guys. I'll post my findings when I tinker with it at work Monday.

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    EDIT:
    I tried this change first, but didn't seem to fix the problem.
    I replaced the line that was there, with this line ...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    You've got some conflicts here.

    Try This:

    1) Remove the lines shown in blue:

    <div id="text">
    <p class="pinTypeIntro">Lasting Footprints is your source for stock and custom designed pins for your varsity club or sports team. Don't be left behind at your school, college, or university. Increase unity and show your support by proudly wearing a pin that represents your team, club, or activity. </p>
    <h2>Varsity Pin Sports Listing</h2>
    <p>Lasting Footprints sells stock pins for the following activities and clubs: </p>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    (table code here blah blah blah)
    </table>
    <h2>Stock Varsity Pins Photos </h2>
    <div align="center"><img src="../images/pins/stock/chenille/Chenille1.jpg" width="679" height="398"><br>
    <img src="../images/pins/stock/chenille/Chenille2.jpg" width="700" height="452"><img src="../images/pins/stock/chenille/Chenille3.jpg" width="661" height="449"><img src="../images/pins/stock/chenille/Chenille4.jpg" width="703" height="464">
    </p>
    </div>
    </div>
    <!-- END div#text -->



    2) Add the blue line shown (in layout.css):

    #column1 {
    font-size:0.8em;
    margin-top:0px;
    padding-top:0px;
    float:left;
    width:536px;
    position:relative;
    }


    3) Now #column1 affects the font size in your pinTypeInfo section also.
    So, if you want to adjust that separately, do this:

    <p class="pinTypeIntro"><span style="font-size: 1.2em;">Lasting Footprints is your source for stock and custom designed pins for your varsity club or sports team. Don't be left behind at your school, college, or university. Increase unity and show your support by proudly wearing a pin that represents your team, club, or activity. </span></p>
    <h2>Varsity Pin Sports Listing</h2>

    I'm not sure why the re-defined font-size in "pinTypeIntro" is not seen, but
    it must have something to do with nested classes. I think IE has a problem with
    nested classes and ids ... it stinks.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:06 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com