SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with positioning

    I'm fairly new to all this and could use a bit of help.

    webct.mscc.edu/motlowtest/

    webct.mscc.edu/motlowtest/css/style.css

    First, the area containing the Search box doesn't display properly in IE. It appears to be ok in Firefox. Any ideas on fixing it or doing it better? Also, right now the A-Z image is borked, is it possible to completely render something like what I have in CSS?

    Second, the unordered lists in the News and Events areas have the proper spacing from the heading in Firefox but not in IE. Yes, the heading is an image. The designer wanted to use that font.

    Any other suggestions would be appreciated. I really want to learn all I can about design. On a side note, the design itself isn't mine. I'm trying to convert a Fireworks mock-up to some semblance of proper code.

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Regarding the form in IE, probably if you add margin: 0; padding: 0 on your form element in the CSS that will solve your problem. You might want to also ensure there's no unnecessary padding/elements on any other elements inside the form. a CSS reset would solve this and other issues you're having.

    For the space in IE for the UL, just add "margin-top: 15px" in your CSS for this unordered list, that should even it out. Again, the CSS reset would help this from the start.

    And regarding the A-Z image, there's a number of different ways to do that, table is the easiest, but CSS is possible, maybe more complex and harder to customize.

    Louis

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, that helped a great deal. I don't quite understand how to implement the CSS reset but I'll do some studying and figure it out.

    Another problem I just discovered, I'd got some gaps appearing between some of my images in IE that aren't there in Firefox. What am I doing that is causing this?

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't remember exactly what causes that, but maybe try adding "display: block" or "display: inline" to all your images in the CSS. I think "block" should do it.

    Maybe also remove any white space in your HTML between the image and the closing DIV that it's inside of.

    In table layouts, addding <br /> after each image would fix that, but this might be a different problem since it's CSS.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did some experimenting on your layout and this solved the image space problem for the banner1.jpg image:

    Code:
    <div id="banner" style="border: solid 1px;">
    <img src="img/banners/banner1.jpg" width="597" height="267" /><br />
    </div>
    Not the most elegant solution, and you'll have to put it into your CSS, not inline like this, but that's generally the result you desire.

  6. #6
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Once again, thank you. You've been a great help. It was Display:block that worked.


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
  •