SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Location
    Charlotte, NC
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float issue in Opera

    I am having an issue with a float:right on the slider_container div in my design in Opera. It shows up correctly in ie7, ie8, Firefox, Safari and Chrome, but for some reason in Opera it is sitting on the left side of the page. When I used Opera's developer tools to troubleshoot the CSS, it shows that the float:right is valid, but it is doing the box calculations with a huge right measurement that I just can't seem to figure out.

    As this is my first post, it won't let me post the link to my site, but it should be in my profile.

    I'm hoping I've just stared at it for too long, and I am just missing something simple. I appreciate your help!

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Bah, post the link with () around the dots, and leave out the http and www stuff:
    google.com or google(.)com works here.

    Or, alternatively, you can also post your code in [code] tags.

    Does this box have any weird margins? I think all browsers have a limit on widths but Opera's particular width limit has come up quite a few times in the forums which may be what you are hitting. You say it's a slider box... is it one of those overflow: auto boxes with a larger box inside?

    *edit found it: http://www.recreativestudios.com/

    http://stommepoes.nl/creativestudiostop.jpg
    http://stommepoes.nl/creativestudiosbottom.jpg

    Looks like it's got issues anyway.

    What surprised me was that a right floated box was letting another box later to just ride up like that... I'd have thought that #tag would have needed to be floated left.

    Opera also seems to show issues in the menu: Home is wrapping. Are all the widths wide enough?

    It's almost as if the #tag box in Opera is bumping #slider_wrap to the left. #tag does come later in source, so I could imagine that happening. Not sure how, but the whole code-setup should have been good without Javascript getting involved. FF doesn't look too good without JS (those screenshots are no-js).

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Location
    Charlotte, NC
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    recreativestudios(.)com

    No weird margins, but yes, the slider I am using does use overflow:hidden to show just the part that should be visible, while hiding the rest of the images. It's a jQuery plugin called Easy Slider.

    HTML
    Code:
    <div id="slider_wrap">
      <div id="slider">
        <ul>				
          <li><img src="images/slider_chiro.png" alt="Chiro Life Center" /></li>
          <li><img src="images/slider_wwwiaf.png" alt="Who Would Win In A Fight" /></li>
          <li><img src="images/slider_onm.png" alt="Odor No More" /></li>
          <li><img src="images/slider_ihbcwa.png" alt="IHBC Worship &amp; Arts" /></li>
        </ul>
      <!-- end #slider --></div>
    <!-- end #slider_wrap --></div>
    CSS - Most of this is canned from the Easy Slider zip file.
    Code:
    #slider_wrap {
    	float:right;
    	margin:20px 65px 0 0;	
    	height:275px;
    	width:400px;	
    }
    #slider_wrap img, #slider_wrap a, #slider_wrap a img {
    	margin:0;
    }
    #slider ul, #slider li, #slider2 ul, #slider2 li {
    	margin:0;
    	padding:0;
    	list-style:none;
    	height:275px;
    }
    #slider2 {margin-top:1em;}
    #slider li, #slider2 li { 
    	width:400px;
    	height:275px;
    	overflow:hidden; 
    }	
    #prevBtn, #nextBtn, #slider1next, #slider1prev { 
    	display:block;
    	width:27px;
    	height:54px;
    	position: relative;
    	left:-27px;
    	top:-165px;
    	z-index:1000;
    }	
    #nextBtn, #slider1next { 
    	left:400px;
    	top:-219px;
    }														
    #prevBtn a, #nextBtn a,
    #slider1next a, #slider1prev a {  
    	display:block;
    	position:relative;
    	width:30px;
    	height:77px;
    	background:url(../images/slide_btn_left.png) no-repeat 0 0;	
    }	
    #nextBtn a, #slider1next a{ 
    	background:url(../images/slide_btn_right.png) no-repeat 0 0;	
    }

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

    You just need to clear the menu.

    Code:
    #slider_wrap {
    clear:both;
    }

  5. #5
    SitePoint Member
    Join Date
    Feb 2010
    Location
    Charlotte, NC
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was missing both an overflow:hidden and the clear:both, thanks to both of you, I knew it was something small.

    I have not been able to recreate the menu wrapping issue that you although. I don't see it reflected in the screen shot you took either.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    No my screen shot was in FF and the menu wrapping I only saw in Opera. Lemme check it now...


    Not good on Linux: http://stommepoes.nl/creativehover.png

    I melded together a bunch of screenshots, hovering over different parts of the menu, shown at fullscreen to make sure it wasn't because of a small browser or anything. Also showing a little part I tacked onto the bottom showing the white text still spilling out (or is that from #tag)?

    If Opera on Windows is fine then the menu is likely just a font-size issue and while Gnome should not be affecting Opera (it does affect FF), that would be my guess as to the cause.

    All my screenshots btw will prolly be off the server in a week or so... I don't let them stay on there forever, so eventually the above link will go dead.

  7. #7
    SitePoint Member
    Join Date
    Feb 2010
    Location
    Charlotte, NC
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I did my testing on Mac and Windows, but haven't booted up Ubuntu lately. I'll take a look at that today, thanks for letting me know.

    The menu does look like a font issue, so I will need to adjust for that. I know the clear:both fixed the Opera float issue on Windows, but I take it that it still looks wrong in Linux as per your screen shot.

  8. #8
    SitePoint Member
    Join Date
    Feb 2010
    Location
    Charlotte, NC
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use Century Gothic with Verdana / sans-serif as a backup. I believe *nix does not include the Century Gothic font. If I switch to Verdana on Windows I have a similar issue. I just need to adjust the rules a bit to account for the differences in the font size between these two fonts.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Century Gothic is, last time I checked, a paid font: I tried to get it once and found I needed to purchase it. General rule, paid fonts aren't usually considered Web Safe.

    Verdana is NOT on *nix machines unless users download msttcorefonts (which is free but you do have to go ahead and do the apt-get yourself). I have Verdana because I did download them (for Gimp).

    I love Verdana but you have to be really careful with it due to its large-than-normal x-height. In fact, I try to only pair it with Bitstream Vera Sans and DejaVu Sans because they're also pretty big (so users who don't have Verdana may be Unix people with one of the other two). And if I have small fonts that are Verdana I'm uneasy because someone with none of those fonts will default to the system sans-serif, which would be too small for some people.

    Definitely, it was a menu of mine where I first saw this: it was originally Verdana, Arial, Helvetica, sans-serif; and while things looked ok on my machine (back then I didn't have MS fonts), on a Windows machine the menu wrapped. That's when I got careful with Verdana : )

    The menu does look like a font issue, so I will need to adjust for that. I know the clear:both fixed the Opera float issue on Windows, but I take it that it still looks wrong in Linux as per your screen shot.
    I partially covered up the scrolly thing with that overflow problem, lemme post just a full plain screenshot.

    http://stommepoes.nl/creativeopera.png (if it's 404 I haven't uploaded it yet, and it will be indexed so don't worry about banding colours)

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    That screenshot shows the slider still on the left Mallory so I guess that's a cached version you are looking at? It's set to float right and clear:both so it can't still be on the left!

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The menu styles seem to conflict as you have set the menu and the ul inside it to the same size but you have also added a margin to the inner element making it too big.

    If you change it slightly it should fit in Stomme's Opera.

    Code:
    #menu {
        margin:0;
        padding:0;
        float:right;
        width:481px;
        margin:0 10px 0 0;
        display:inline;
    }
    #menu ul{
        margin: 35px 0 0 0;
        float: right;
        font-weight: bold;
        font-size:17px;
        width: 481px;
    }

  12. #12
    SitePoint Member
    Join Date
    Feb 2010
    Location
    Charlotte, NC
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This font discussion has lead me to realize something, there are very few fonts that are available on all Win/Mac/*nix platforms.

    I found this information which shows a good comparison of web safe fonts across different operating systems, I assume the info is valid, but without testing on all 3 platforms, it's hard to know for sure. That being said, I agree the difference between Century Gothic and Verdana is a bit much, but I need to test a few of the fonts that are included in *nix to ensure that they don't break any of my layout if used.

    My goal is to create layouts for clients that work on the major browsers, and the major OSes. Testing each browser on each platform is becoming increasingly time consuming as more browsers are gaining popularity. I just recently dropped support for ie6, which saves tons of time, but this is a part of my project timeline that I feel I still struggle with.

  13. #13
    SitePoint Member
    Join Date
    Feb 2010
    Location
    Charlotte, NC
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, that was an oversight on my part, but that looks like it did the trick, and hopefully it fixed the issue on Stomme's set up as well.

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Sorry, Paul's right... menu's still off but the only text issue now is recent work:
    http://stommepoes.nl/creativeopera2.png

    niet een slimme poes

    I've been using this page for visually checking font differences when making font stacks.


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
  •