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 10 of 10
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Troubleshooting

    Hey this is my first time trying to make a CSS/XHTML website, the site seems to be working well in Firefox but it messes up in IE and for some reason the layout does not appear to change when the resolution or window is resized like what I mean is that the buttons don't move to fit the window like these sites: http://www.cssbeauty.com/
    if you resize your window or change your resolution the site reconfigures to keep the same look but my site just stays static

    edit: if you are on IE the images look messed up because of the PNG alpha transparency settings i'll get that taken care of from this tutorial: http://www.alistapart.com/articles/pngopacity/

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    ....er.... How about a link or some code? Or are you just looking for sympathy?

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    edit:sorry my site is: www.sbhssports.com/newkaya/

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    You're going about some of this the wrong way. You're using a lot of absolute positioning, which take an element out of flow and positions it relative to the viewport, or its containing element. In other words, you're positioning everything at least 200px from the left of the window:
    Code:
    #bg{
    background: url(bg.jpg);
    position: absolute; 
    z-index: 1; 
    left: 200px; 
    top: 57px;
    width: 800px;
    height: 600px; 
    }
    You're also putting the large background image in an empty div. Try this approach: Make the large background image a div that contains the rest of the content. Then place that in the center of the viewport by using auto margins...
    Code:
    #wrapper {
     background: url(bg.jpg); no-repeat top left;
    width: 800px;
    height: 600px;
    margin: 10% auto;
    }
    That should get you started, at least. Hope this helps...

  • #5
    New Coder
    Join Date
    Aug 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I updated it (on IE run the ActiveX component it's the only way to get transparency to work)

    I do have one problem the line under the links is longer in Firefox than it should be why is this?

    I was just wondering how can I better the site? CSS wise what should I do differently or add or delete?

    http://sbhssports.com/newkaya

  • #6
    New Coder
    Join Date
    Aug 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I redid the site but I used underscores for different formatting for IE I know this is bad practice so how do I fix this so I don't have to keep doing this for all the sites I make? how does everyone else deal with IE?

    If you look at my CSS you will see my quick and dirty method.

  • #7
    New Coder
    Join Date
    Aug 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also I was wondering how is it possible to style a button while visiting a page and not have that show when you're not on the page.

    For example, if I was on the home page I would like the Home page to change color but when I am on the Services page I would like the Services button to change color and the Home button to go back to its original color

  • #8
    Registered User
    Join Date
    Aug 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dasickis
    Also I was wondering how is it possible to style a button while visiting a page and not have that show when you're not on the page.

    For example, if I was on the home page I would like the Home page to change color but when I am on the Services page I would like the Services button to change color and the Home button to go back to its original color
    I would create 2 CSS classes, and then have the Javascript figure out what page to assign which class. Since this requires some kind of working logic, you'll need to program it either in JS or some serverside script. It would be no problem.

    If you're designing static pages, you can manually assign which class goes to which button, per page... but this wouldn't be very scalable.

  • #9
    New Coder
    Join Date
    Aug 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey is it just me or do the images load up slowly on IE?

  • #10
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by dasickis
    Also I was wondering how is it possible to style a button while visiting a page and not have that show when you're not on the page.

    For example, if I was on the home page I would like the Home page to change color but when I am on the Services page I would like the Services button to change color and the Home button to go back to its original color
    I recall reading a post about this a couple of months ago, where this can be done totally in css. I'm short of time right now but later, I'll try the search facility here.

    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


  •  

    Posting Permissions

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