Float issue in Opera

HTML & CSS
1

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

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

 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

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


<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.


#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

Hi,

You just need to clear the menu.


#slider_wrap {
[B]clear:both;[/B]
}
5

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

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

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

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

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

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

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.:slight_smile:


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

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

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

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.