SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast PurplePenny's Avatar
    Join Date
    May 2004
    Location
    Oxford
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gone tableless, need some advice

    Hi people,

    Inspired by Dan Scafer's book I went tableless with a new page that I was just adding to my site. When that worked I did it for the whole site (except one page that I realised yesterday that I'd overlooked!).

    At first it looked OK in Opera and IE but I had a problem in Moz. I've now solved that but there are still a couple of things that need attention.

    I've used CSS to create buttons using a background image and outset border. It looks really nice (well I think it's nice :-) ) but bits of the resulting buttons keep getting cut off (mainly in Opera). Sometimes the right end is missing, sometimes top, sometimes bottom .. sometimes top and bottom. It isn't consistent and scrolling up and down a page sometimes brings the missing tops and bottoms back; it seems to be more than just the border that gets cut off. Please could someone look at it and give me hint as to why it is happening and what I can do about it?

    I should warn you that the site is e-commerce selling adult stuff (though probably not the adult stuff that you are imagining). (I've cleared it for posting here to make sure that it didn't break any forum rules.)

    www.brazenleather.co.uk

    The stylesheet is /css/brazen2.css

    The other thing that would be a great help to me is that I've created the stylesheet by trying this and that until it looked much the same in Opera , IE and Mozilla. But that means that I've got a strange mish-mash of padding and margins. If anyone spots redundant code, or a better way of doing something, I'd be more than happy for you to point it out.

    BTW the <hr>s are there because of the way I've laid the products out - photo/text, text/photo, photo/text etc.. with style sheets turned off that can be a bit confusing so I put in the <hr> to make it clearer ... and then I liked the look.

    That reminds me of another question - why does the style that I've used for the products align in the middle with just width: 80%; but to get the hr to line up in all browsers I had to add a left margin of 10% to it?

    Oh no .. now I've thought of something else ...but it involves a "light" stylesheet for Netscape 4 so I'll leave that until after this question has had an airing :-)

    Thanks,
    PurplePenny

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You didn't say what version of Opera was not behaving. I checked 7.2 and 7.02 and they seemed to look ok. Opera 6 didn't show the bg images on the buttons but nothing was cut off.

    Paul

  3. #3
    SitePoint Enthusiast PurplePenny's Avatar
    Join Date
    May 2004
    Location
    Oxford
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    7.5. It doesn't always cut them off, it isn't at all consistent .. but it looks very odd when it does happen and there is usually one somewhere on each page. I can't test in 7.2 any more after a problem that no-one on the Opera forum can answer (it runs but no longer opens!!!!!) but I'm glad to hear that they don't get cut off in the Opera 7 earlier versions.

    I just can't work out *what* it is doing. If it aways did the same thing it would be a help but it might cut off bits of just one button and all the others on the page will be OK, other times several buttona are truncated. There is no pattern to which buttons get cut off (not all in the same place on the page).

    I thought that I saw the same (or similar) behaviour in another browser but I've just checked IE and Moz and I don't think that I've looked at it in Firefox or Netscape since I made the changes. If it is only happening in one version of Opera 7 that isn't too big a worry I suppose .. but I'd still rather it didn't do it.

    Penny

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I've just checked Opera 7.2 Ie6 and firefox and couldn't notice anything untoward

    Perhaps you can post a screenshot next time it does it. I don't have Opera 7.5 to test on so I can't really say whats happening. If I get a chance this week I'll try and download it but it depends on how much time I have.

    Paul

  5. #5
    SitePoint Enthusiast PurplePenny's Avatar
    Join Date
    May 2004
    Location
    Oxford
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul - I'll post a screenshot tomorrow.

    Penny

  6. #6
    SitePoint Enthusiast PurplePenny's Avatar
    Join Date
    May 2004
    Location
    Oxford
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Screenshot

    I just realised a problem with posting a full screenshot - I only have permission to post the URL of the first page because of it being an adult site - so I can't really post an entire screenshot of one of the inner pages.

    What I've done is to cut and paste examples of normal buttons and cut off buttons. Ignore the fuzzed out writing - I've done that to cover up the words so as not to cause offence.

    Hope this makes sense. If not I'll post a screenshot on the site itself.

    Penny

    PS - I seem to have done it wrong. When I posted this it said that the file buttons.jpg was attached but nothing is showing up with the message itself. I'll try again.....
    Attached Images Attached Images
    Last edited by PurplePenny; May 26, 2004 at 15:02. Reason: No jpg attached

  7. #7
    SitePoint Enthusiast PurplePenny's Avatar
    Join Date
    May 2004
    Location
    Oxford
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know what I'm doing wrong. It said that the file was attached :-(

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Don't worry it takes a while for an advisor to approve it and then it gets attached properly.

    It may not be up for a few hours yet.

    Paul

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've noticed in Opera 7.2. that if you move content so its below the fold of the window then scroll with the wheel on the mouse to make the content appear and then disappear. Then drag the page back into view the the tops and bottoms of the buttons are missing.

    Thats the only way I could get anything strange to happen and it seems like Opera isn't re-drwaing the screen properly after its been hidden.

    I also noticed that taking out the vertical-align:bottom from the navbutton class seemed to cure it (I don;t know why).

    Perhaps something similar may occur with your Opera 7.5. so its worth a try.
    Code:
    .navbutton {
     font-family: papyrus, verdana, sans-serif;
     font-weight: 900;
     margin: 4px;
     padding: 4px;
     border-style: outset;
     border-color: #ffbb00;
     color: #000000;
     text-decoration: none;
     background: #ffbb00 url("http://www.brazenleather.co.uk/images/brass.jpg");
    }
    Paul

  10. #10
    SitePoint Enthusiast PurplePenny's Avatar
    Join Date
    May 2004
    Location
    Oxford
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant! Thanks Paul - I'll give that a try. That sounds like exactly the same problem so hopefully the same fix will cure it in 7.5.

    Thanks again,
    Penny


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
  •