Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics


Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthoruscguy83
    • CommentTimeAug 20th 2008 edited
    Hi. I'm new to the forum and CSS.

    I am hoping someone can help me understand where I am going wrong with my CSS. I decided to switch my blog/report site over from all HTML to CSS for easier updating, but I am having a problem with the site looking the same in Safari(works perfectly) and IE (terrible).

    The site isn't live yet, so don't be put off by the repetitive typing.

    Here are my issues in IE:
    1. Problem centering the entire wrapper div in the IE browser.
    2. Links bunch up when placed after another link in the second & third columns and the small date moves up.
    3. Is there a way to make the borders of the div tags thinner in IE.
    4. My "flickr-badge" doesn't seem to work with IE or Firefox, just Safari.. any suggestions? (the current images are just temporary

    My issues over all:
    1. I can not get the side borders to extend all the way to the bottom/to the footer without setting a height to the div tag. Is there a way to achieve this without setting a specific height?

    Also, if anyone has a better method of achieving the design I am after (header, 5 columns, footer), Please let me know. I am willing to listen and learn.


  1.  permalink
    Welcome to the CSSBeauty forum, newbie!

    First, you mentioned you are new to CSS stuff. Before you dive into CSS, you will seriously need to learn the basics of (X)HTML (or HTML) first to help you make sure you use the proper semantic/markup structure and syntax. I would suggest you check out the new Opera Web Standards Curriculum. Once you grasp and understand the basic markup, you can learn how to use CSS.

    Secondly, in regarding to the various issues you are currently having with IE, you may want to read up on the many IE-related bugs and problems at Position Is Everything. IE is notorious for giving a lot of us folks grief in fixing layout and/or design problems. It's a real pain-in-the-rear.

    Looking at your browser source code -
    1) Missing DOCTYPE and open HTML tag.
    Read and learn about DOCTYPE at Opera Web Standards Curriculum.

    You can select a DOCTYPE template at The Web Standards Project site.

    2) Link is not a member of anchor attribute except it can only be used within the head tag.
    Spurrier Allows Garcia To Return...August 18, 2008

    Personal comments/feedback -
    1) Go with flexbile/liquid layouts instead of in a fixed layout (975px). If you Google "grid layout & CSS", you'll find a lot of helpful and useful information to help you get started by understanding how everything work.

    One site I would check out for reading and learning grid stuff is Design by Grid.

    I would also check out the grid frameworks such as YAML
    and emastic.

    2) Your left column/sidebar would need to be used in an unordered list.
    <!-- A -->
    <li><a href="">ABC News</a></li>
    <li><a href="">The Advocate</a></li>
    <li><a href="">Aiken Standard</a></li>

    <li><a href="">Athens Banner-Herald</a></li>
    <li><a href="">Atlanta Journal-Constitution</a></li>
    <li><a href="">Augusta Chronicle</a></li>
    <!-- B -->
    <li><a href="">Beaufort Gazette</a></li>

    3) For the 2nd and 3rd column, think about the box model.

    Think of it something like this:
    <div class="box-article">
    <h2>Spurrier Allows Garcia to Return</h2>
    <em class="cdate">August 18, 2008</em>
    <p>estibulum risus. Nullam adipiscing. Etiam fringillaestibulum risus. Nullam adipiscing. Etiam fringilla...</p>

    <div class="box-article">
    <h2>Is Garcia Returning...or Not?</h2>
    <em class="cdate">August 17, 2008</em>
    <p>estibulum risus. Nullam adipiscing. Etiam fringillaestibulum risus. Nullam adipiscing. Etiam fringilla...</p>

    3) As for the Flickr badge issue, read Veerle's blog on how to achieve what you are trying to do.

    4) Validate your markup to fix any errors you may have. I use Firefox add-ons such as HTML Tidy or Web Devleoper Toolbar.

    Until then, good luck!
Add your comments
    Username Password
  • Format comments as (Help)