SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Apr 2003
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Couple of IE bugs

    Hey

    I have a few IE bugs that need fixing. I'm not too good with the bug bashing side of CSS so I need help please.

    URL: http://www.chrisgwynne.com/
    CSS: http://www.chrisgwynne.com/includes/base.css

    Issue #1 - There's a slight margin problem between the masthead and the nav bar. They're supposed to be joined up but there's a small gap between them.

    Issue #2 - On the main page the right hand column is for some reason off. On other pages it's in place properly. But on this page it's to the right a little messing up the whole alignment.

    Issue #3 - On pages where I've used fielset and the forms there's two issues. Firstly there's a top gap on the fieldset area, whole extra coloring above the legend text. Secondly, where I've used the textarea it seems to have extended itself too long which throws off the right column. Both problems can be seen here; http://www.chrisgwynne.com/contact/


    Any help is appreciated.



    Chris

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Issue #1 - There's a slight margin problem between the masthead and the nav bar. They're supposed to be joined up but there's a small gap between them
    Its the h1 text in the masthead thats causing the gap.

    Try this:

    Code:
    #wrap .masthead h1 {margin:0;padding:0;height:20px;}
    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Issue #2 - On the main page the right hand column is for some reason off. On other pages it's in place properly. But on this page it's to the right a little messing up the whole alignment.
    This is the IE italic (em) bug where italics or emphasised text push the element wider than its container.

    Its these specific em text here:

    <p><strong>P.S.</strong> Welcome to the visitors from <a href="http://www.stylegala.com/" rel="external">Stylegala</a>,
    I’m listed in the <em>Worth a Visit</em> section. </p>
    Delete the em and you will see that the menu fits properly now.

    If you want em on that text then you will need to wrap an inner div in the side container that is smaller than the container and then that will allow the paragraph to expand. (Or setting a 95% (approx) width on that p tag would probably work. Or any other method that reduces the total width and allows the inner element to expand.

    Paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Issue #3 - On pages where I've used fielset and the forms there's two issues. Firstly there's a top gap on the fieldset area, whole extra coloring above the legend text. ;
    The way I usually get around this is as follows:
    Code:
    .entrycomment {
    background: #E5E1DE;
    border: 1px solid #ccc;
    font-size: 90%;
    margin: 0 25px 25px 41px;
    padding:1em;
    }
    * html .entrycomment {position:relative;}
    .entrycomment legend {
    color: #3A3A45;
    font-family: Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Courier, Times New Roman, Serif;
    font-weight: bold;
    padding: 0 0.5em;
    }
    * html .entrycomment legend {
    position:absolute;
    top:-10px;
    left:10px;
    }
    Secondly, where I've used the textarea it seems to have extended itself too long which throws off the right column. Both problems can be seen here
    You have made the textarea too big and ie just expands whereas mozilla won't let you. Just reduce the size of the textarea in the html.
    Code:
    <textarea tabindex="4" id="text" name="message" rows="10" cols="42" class="required"></textarea>
    That should be the whole lot sorted now

    Paul

  5. #5
    SitePoint Addict
    Join Date
    Apr 2003
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Paul, that's fixed all of them.

    How in the hell you found out issue #2 I'll never know lol. I'd never have thought it was because of one of my posts...

  6. #6
    SitePoint Addict
    Join Date
    Apr 2003
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops just one more thing.

    On the individual pages such as; http://www.chrisgwynne.com/archives/...mber/sitework/ even if there is no <em></em> present on the page the right column is still off. This happens on all individual pages actually... any help?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its the same problem as above with the textarea. You have it set to 43 which is one too many.

    42 seems to be the max
    Code:
    	  <textarea tabindex="4" id="text" name="text" rows="10" cols="42" class="required"></textarea>

    Paul


Bookmarks

Posting Permissions

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