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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Issues with sidebar positioning when resizing browser

    Hello,

    I started working on my first table less design today. All went well except for my sidebar. When the browser is resized it goes all wacky. Can you take a quick look at tell me what you think is wrong with it?

    I'm stumped!

    Here's the page:
    http://goodbyebadbreath.com/test_fil..._test_run.html

    Please keep in mind that I am very new to CSS... I've been reading up on CSS for about 3 weeks now. This was my first go at actually trying to create a web page using CSS...

    Thank you so much for your help!

    Jessica

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Hi Jessica,

    welcome to CF.

    Beofre you spend more time working it out, you'll need to fix you errors as shown by the w3c validator. (all 152 of them).
    http://validator.w3.org/check?verbos..._test_run.html

    If that seems daunting, see how far you get and post back if you need help, with understanding what it means.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    This is in response to Bazz's post. I wrote it on another forum, but it is the same thing:

    IE is known to have issues, and many sites are built around it. However, sometimes a site will be incorrectly coded, but IE will display it anyways. (IE is NOT W3C compliant)

    Markup is the HTML code and tags (HTML=Hypertext Markup Language).

    The W3C is the World Wide Web Consortium, and is the governing body on web standards. They set what is and isn't allowed in code. Web browsers are based, among others, on how well they conform to W3C Standards. This is done so that every browser that is W3C compliant will show pages exactly the same, hence IEs problem.

    Your code can also be validated for errors. The errors come from a DTD, or Document Type Definition, which says what is and isn't allowed in the code. I noticed you were coding in XHTML 1.0 Strict. This DocType is somewhat different from regular HTML like you have been using, as many tags and attributes are depreciated. The rules are different, and many tags are no longer legal.

    The link given to you by Bazz http://validator.w3.org/check?verbos..._test_run.html is W3Cs validator.

    It shows you errors on the page. Fix those errors, than work on getting the site right. One tip: Do NOT build the site for IE as IE is, as I set, NOT W3C compliant. Build it for Firefox or Safari and than work out the kinks in IE. It will be much easier that way.

    (Programs like Dreamweaver have tools built in to verify if a site is compliant with a browser, as well as the W3C.)

    Hope this helped.

    -MacWiz

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by JessicaK View Post
    All went well except for my sidebar. When the browser is resized it goes all wacky.
    Looks like your positioning the sidebar with absolute positioning, 312px from the right. So when you move the browser window all around, the sidebar moves with it.

    What I would try first is to make the wrapper (#wrapper) a relative container (i.e., all absolutely positioned elements are positioned relative to the container) by adding "position: relative" to #wrapper in the CSS.


  •  

    Posting Permissions

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