SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Safari Hack ID/CSS combo

    I'm using a Safari hack to fill in a gap on the last menu item, but I cannot seem to get it to work correctly.


    Code:
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    
    .moduletablemainmenu ul.menu li#current.last-child .active {
    
    	border-right: 10px solid #bbb;
    }
    
    }
    Did I miss a step somewhere in the basics of CSS?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Trying to fill a space with padding will be hit and miss, as each browser will calculate font sizes etc differently. Instead, remove that border and set the <a> in the menu to display: block;

    See if that helps.

  3. #3
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have a content block with fixed width and you know exact number of menu items. Why not just set fixed width to them instead of calculating paddings for each of them to fill in the gaps?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,496
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If you don't want to use exact widths then remove the left and right padding from the last list item and unfloat the list but set overflow:hidden.

    That will allow the last item just to fill the remaining space automatically (second time this question has been asked in the last few hours )

    Something like :
    Code:
    .sf-menu .last-child {padding:0;float:none;overflow:hidden;zoom:1.0}
    .sf-menu .last-child a {padding-left:0;padding-right:0}

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    a negative right margin on the last one to make sure all browsers ride it up would also help.

    I would also suggest on the menu taking an axe to the transparency that makes the text in the dropdowns impossible to read, the giant javascripted animated nonsense that just gets in the way of using the menu, getting rid of the serif text since that's hard to read on screen and possibly changing the content text into a legible font metric instead of the undersized illegible px you have now. Oh, and the grey on black may as well be invisible too since that's below accessibility norms.

    On the whole, the page is knee deep in issues, from the XML prolog forcing IE into quirks mode, to the overreliance on javascript on pages that shouldn't need ANY, the dozen or so conflicting stylesheets (specificity must be hell on that layout), the endless pointless nested div's, inlined presentation in the HTML and complete lack of anything remotely resembling semantic markup.

    Here's a tip, if you have more than 9k of markup before you even open the BODY tag, there is something HORRIBLY and DISASTROUSLY wrong with your code. If your entire site totals 480k in 34 files to deliver 836 bytes of content and only 146k of that consists of images, it's time to throw the entire codebase in the trash and start over clean. You've got 24k of HTML doing 8k's job. (and I'm being generous because of the forms)

    I mean even simple stuff:

    Code:
    <div class="form_item">
      <div class="form_element cf_textbox">
        <label class="cf_label" style="width: 150px;">Email Address</label>
        <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="Please enter your email address" id="text_1" name="email" type="text" />
      
      </div>
    </div>
    What are those DIV even in there FOR?!? What's with the title attribute on elements that don't take a title attribute?

    ... and that's before we even talk the giant outdated script to try and hide the e-mail -- because disabling contact information for people who block scripts is going to go over so well... Much less the noscript text not wrapped in a noscript and again, outdated script declarations.

    Nonsensical heading orders, heading tags doing LEGEND's job, paragraphs around non-paragraph elements, IE conditional comments for entire sheet embeds on a layout so simple it shouldn't even need browser hacks, static CSS inlined in the markup, static scripting inlined in the markup... hell, I'm stuck trying to figure out why it's only throwing 6 validation errors.

    Oh wait, transitional -- so the code is in transition from 1997 to 1998...

    Do yourself a favor -- throw it away and start over, there's nothing worth saving there.


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
  •