6 replies [Last post]
talino
Offline
Regular
Paris, France
Last seen: 12 years 15 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Does anyone know why in talino.org/tutorials.php the text for each element appears below the image and not below the red header in Opera?

Each box is a separate DIV.

Each image uses :

float:right;
clear:both;

With some margins and padding.

It comes first and then a red header and a paragraph (no special properties).

In Opera, the paragraph is aligned to the bottom of the image. I tried different "display" properties for both h1 and p and couldn't get it to work. Opera just ignores them.[/code]

DeEsser
Offline
newbie
Last seen: 17 years 35 weeks ago
Joined: 2004-09-19
Posts: 4
Points: 0

Float problem in Opera 7

Sorry, but I find your post a little confusing. Could you simply describe what you want it to look like?

talino
Offline
Regular
Paris, France
Last seen: 12 years 15 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Float problem in Opera 7

Sorry for the confusion. I'll make it as clear as possible. Please check the link in my post to see the actual page.

Forget the navigation buttons and header. The page has several boxes with a light grey border. Each one is a separate DIV. Inside, there is a <img> tag for the thumbnail, a <h1> tag which makes the header red, and a <p> tag for the text.

I want the image to be on the right, the header on the left aligned to the top of the image, and the paragraph below the header in front of the image.

This works fine in IE6 WinXP, Firefox WinXP & IE5 Mac OS9 (all I could test). In Opera 7 on XP, the paragraph (inside the <p> tag) appear aligned to the left, like it should be, but below the image, i.e. there is a vertical space between the header and the paragraph which is roughly equivalent to the height of the image minus the height of the header.

I hope this is clearer now. I was wondering if there was a known issue with Opera 7 & floats and if a fix existed.

Thanks.

DeEsser
Offline
newbie
Last seen: 17 years 35 weeks ago
Joined: 2004-09-19
Posts: 4
Points: 0

Float problem in Opera 7

As far as I have experienced yet, Opera handles floats without problems. But I have not found any CSS in your site besides styling for headerOLD and p(aragraphs). No floats... %-)

Anywhere, this should work. Header on the left and image on the right, both aligned to the top-border of their parent DIV. Text in the paragraph left-aligned below the header.

.imageBlock {
  margin: 20px 0;
  clear: right;
}
.imageBlock h1 {
  padding: 0;
  margin: 0;
}
.imageBlock img {
  float: right;
}

One more thing... You forgot to close the paragraph containing "english - français". And there's also a </div> missing to close the <div id="wrapper">. The <div id="imageBlock"> should be <div class="imageBlock"> instead, since there are more than one of this kind in the document. IDs are supposed to be unique.

Edit:
Um, I forgot to mention... I also tested it in Opera 7 and it worked. Smile

talino
Offline
Regular
Paris, France
Last seen: 12 years 15 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Float problem in Opera 7

Thanks a lot for all your input.

Concerning the ID instead of CLASS: it's on my list, so-so priority (half of the site isn't up yet and I'm doing PHP for the first time... Lots to do.)

If you don't see links to stylesheets in the code and only see headerOLD then you're seeing a version intended for non-DOM browsers, which is very odd. This explains why you don't see floats but I can't see why. What browser are you using? I'm using PHP to detect the browser type and as of now only Netscape 4.7 uses the headerOLD stylesheet (which is what I expect it to do). All modern browsers I've tested (Mac: IE5 & IE5.5, Safari. Win: IE6, Firefox 0.93 & RC1, Opera 7.54) are properly detected. Source code should start with several links to different css files and the first DIV should say "header", not "headerOLD".

Anyway, the code for non-DOM browsers hasn't been polished yet and is *certainly* not what I expected you to see.

As to your styling code, this is precisely what I've done (plus margins, padding and other stuff which doesn't matter, although I tried removing them all and the problem in Opera persists).

Could you please tell me which browser you are using and/or try to have a look at the styling with one of the browsers mentioned above (or any modern one)?

Thanks a whole lot for your time.

P.S. I include (very small) screencaps showing the problem.

DeEsser
Offline
newbie
Last seen: 17 years 35 weeks ago
Joined: 2004-09-19
Posts: 4
Points: 0

Float problem in Opera 7

First of all: I've found out what Opera's problem with your site is. In main.css you set the width for #imageblock p to 100%. Opera seems to be the only of my available browsers that has a problem with this. It probably "thinks": If that paragraph stretches 100% there's no room for other elements.

Simply remove this line and it should work.

Now that other thing. Good you mentioned your browser-checking script. Although I usually use Opera 7.23 to browse the web, I have modified my user agent string to display something fancy. It's that simple. Wink

talino
Offline
Regular
Paris, France
Last seen: 12 years 15 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Float problem in Opera 7

May the gods of W3C bless you... Nice and simple. I appreciate your help very much. Dunno when we're gonna get predictable behaviors from all platforms. Imagine every DVD player deciding on its own what aspect ratio the image should look nice in Smile

All the best.