Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to keep width of sidebar uniform througout different browsers

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #175762
    misslloyd
    Participant

    My sidebar width is jumping around throughout browsers. Attached are two pictures showing the problem. The first picture is how it looks in Safari and Firefox, and is correct.
    http://imgur.com/0Adxrer
    The second picture shows Chrome and it is much to far to the right.
    http://imgur.com/qOEqZh5
    What can I do to fix this? A rookie at this so needless to say I’ve wasted hours and hours trying to figure it out on my own (believe it or not).
    Thank you to anyone with advice.

    #175767
    misslloyd
    Participant

    I found the problem. Position was “absolute”. I’ve put it to “fixed” and now it seems like it’s fine. Now I’ve arrived at a different problem and my solution that worked for the sidebar isn’t working. I have the sidebar which is fine, that is where I want it and it’s passed the browsers test. But now, my text box is suffering a similar fate…

    http://imgur.com/gWYEU05

    Here is the site…

    http://goo.gl/fSr5zu

    I also can’t tell if the text in the text box is lining up horizontally right with the sidebar but I guess that’s another issue.

    #175787
    Paulie_D
    Member

    I gotta say I think you may be starting out on the wrong foot.

    Using positioning (such absolute, fixed & even relative) has it’s uses but, IMO, these should be reserved for specific effects and not general page layout. There are much better, flexible and responsive layout methods available to you.

    http://learnlayout.com/

    Also, the black background is a little old fashioned AND it makes it harder to diagnose where elements start and finish when inspecting the site.

    #175789
    misslloyd
    Participant

    read all the pages in the link your provided. still have the same problem.

    #175790
    Paulie_D
    Member

    It’s not a matter of just reading the pages…it’s a matter of the way you are (apparently) using one layout method over others..

    In my opinion, using positioning is the last layout method one should use.

    Of course, you are free to do whatever you wish but any solutions we might offer for your specific issue here is likely to unravel as you add more and more elements and content to your page as you seem to be discovering now.

    #175806
    Senff
    Participant

    What Paulie is trying to say (somewhat…) is that if you place a block with position:relative (within a block that’s positioned absolute), left:16%, height:100%, and padding-right:36%, it’s not really surprising that various browsers interpret that differently. Those styles really don’t make much sense (and I’m curious to know why you did it like that?), and there are far better ways of doing what you’re trying to do.

    On top of that, in MY Chrome (on Windows), it displays what you call correct.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.