CSS problem: Different appearance in IE, Firefox, Opera

http://mysite.verizon.net/gdguarino/indexnew.htm

It's not a high priority site, just some of my photos throughout the
years. The address above is an experiment for a new home page. My
intended layout can be seen with Firefox or Opera. In IE the "slides"
don't "fill the grid". Does anyone here know why?

The CSS follows . DIV.slide is the relevant bit. Thanks in advance.

Greg

BODY {
background : black;
}
A {
color : #FFFFFF;
text-decoration : none;
}
A:VISITED {
color : #F0F8FF;
text-decoration : none;
}
A:HOVER {
color : #9999FF;
}

DIV.slide {
height : 182px;
width : 152px;
border : 1px solid #778899;
margin : 10px 10px 10px 10px;
float : left;
background : Black;
}
P.caption {
margin-top : 5px;
margin-bottom : 5px;
}
P.captionh {
margin-top : 5px;
margin-bottom : 30px;
}
..tn {
margin-bottom : 0px;
margin-top : 0px;
}
..full {
margin : 5px 5px 5px 5px;
background : Black none;
border : 1px solid Black;
}
DIV.left {
left : 10%;
display : block;
position : relative;
margin : 10px 10px 10px 10px;
}
DIV.right {
right : 10%;
display : block;
position : relative;
margin : 10px 10px 10px 10px;
}
DIV#skyline1 {
right : 200px;
display : block;
position : relative;
margin : -10px 10px -10px 10px;
}
DIV#skyline2 {
right : 200px;
display : block;
position : relative;
margin : -10px 10px -10px 10px;
}
..spaced {
margin : 10px 10px 10px 10px;
border : 1px solid #778899;
}

Greg G schreef:

[color=blue]
> DIV.slide {
> height : 182px;
> width : 152px;
> border : 1px solid #778899;
> margin : 10px 10px 10px 10px;
> float : left;
> background : Black;
> }[/color]

I think the problem is the MSIE's boxmodel: it adds the margin-length to
the width, so the siv.slide is actually 204 pix wide (incl. the border).

And now for something completely else:
You use uppercase html-tags, which is nog xhtml-compliant, you place
a-tags before p-tags (hierachy inconsistancy). And you don't close the
a-tags in the div's.

If you want your css to work, write clean code first. That takes out a
lot of errors.

Nice photo's btw, your light is great!

--
Niek

'sNiek schreef:[color=blue]
> I think the problem is the MSIE's boxmodel: it adds the margin-length to
> the width, so the siv.slide is actually 204 pix wide (incl. the border).[/color]

thats't 174 off course.

--
Niek

'sNiek wrote:
[color=blue]
> 'sNiek schreef:[color=green]
>> I think the problem is the MSIE's boxmodel: it adds the margin-length to
>> the width, so the siv.slide is actually 204 pix wide (incl. the border).[/color]
>
> thats't 174 off course.[/color]

And that's probably "that's" and "of course" instead of "off course",
and "siv.slide" is probably "div.slide" ;-)
(SCNR :-) )

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els schreef:[color=blue]
> And that's probably "that's" and "of course" instead of "off course",
> and "siv.slide" is probably "div.slide" ;-)
> (SCNR :-) )
>[/color]

Oh my god, a typical monday-morning... Let's get some coffee!

--
Niek

'sNiek <n.emmen@sebastian.nl> wrote:
[color=blue]
>I think the problem is the MSIE's boxmodel: it adds the margin-length to
>the width, so the siv.slide is actually 204 pix wide (incl. the border).[/color]

Before giving advice to others you should get your facts straight. Read
up on MSIE's box model problems and it's doctype switching.
[color=blue]
>And now for something completely else:
>You use uppercase html-tags, which is nog xhtml-compliant[/color]

So? Who's claiming that it *is* XHTML? (not the author)

--
Spartanicus

Spartanicus schreef:[color=blue]
> 'sNiek <n.emmen@sebastian.nl> wrote:
>
>[color=green]
>>I think the problem is the MSIE's boxmodel: it adds the margin-length to
>>the width, so the siv.slide is actually 204 pix wide (incl. the border).[/color]
>
>
> Before giving advice to others you should get your facts straight. Read
> up on MSIE's box model problems and it's doctype switching.[/color]

Getting Padding & Margin wrong, okeh I'm signing off!

--
Niek

On Mon, 15 Aug 2005 08:46:05 +0200, 'sNiek <n.emmen@sebastian.nl>
wrote:
[color=blue]
>Greg G schreef:
>
>[color=green]
>> DIV.slide {
>> height : 182px;
>> width : 152px;
>> border : 1px solid #778899;
>> margin : 10px 10px 10px 10px;
>> float : left;
>> background : Black;
>> }[/color]
>
>I think the problem is the MSIE's boxmodel: it adds the margin-length to
>the width, so the siv.slide is actually 204 pix wide (incl. the border).[/color]

If you wouldn't mind, could you please describe what you think is
going on in a little more detail? I'm not sure I understand.
[color=blue]
>And now for something completely else:
>You use uppercase html-tags, which is nog xhtml-compliant, you place
>a-tags before p-tags (hierachy inconsistancy).[/color]

I did this because I wanted the captions to change color when you
hover over the thumbnail image. I have changed it now, putting
separate A tags around the captions and the thumbnails.
[color=blue]
>And you don't close the
>a-tags in the div's.[/color]

I'm no expert, but that's a mistake I wouldn't usually make. I think I
must have somehow lost those when I was doing some sort of Replace
command.[color=blue]
>
>If you want your css to work, write clean code first. That takes out a
>lot of errors.[/color]

I fixed the ones you mentioned, other than the upper case tags. Those
are only in the upper part of the page. I also moved the first slide
to the end. Interestingly, I now have the same problem, but the
"breaks" in the grid are now in different places. You can view the
result again if you like:

http://mysite.verizon.net/gdguarino/indexnew.htm
[color=blue]
>Nice photo's btw, your light is great![/color]

Thanks.

On Mon, 15 Aug 2005 09:13:12 +0200, in
comp.infosystems.www.authoring.stylesheets , 'sNiek
<n.emmen@sebastian.nl> in <43004086$1@news.interstroom.nl> wrote:
[color=blue]
>Els schreef:[color=green]
>> And that's probably "that's" and "of course" instead of "off course",
>> and "siv.slide" is probably "div.slide" ;-)
>> (SCNR :-) )
>>[/color]
>
>Oh my god, a typical monday-morning... Let's get some coffee![/color]

And its meth, not coffee.

--
Matt Silberstein

Well ya see, Norm, it's like this. A herd of buffalo can only move as fast as the slowest buffalo. And when the herd is hunted, it is the slowest and weakest ones at the back that are killed first. This natural selection is good for the herd as a whole, because the general speed and health of the whole group keeps improving by the regular killing of the weakest members. In much the same way, the human brain can only operate as fast as the slowest brain cells. Excessive intake of alcohol, as we know, kills brain cells. But naturally, it attacks the slowest and weakest brain cells first. In this way, regular consumption of beer eliminates the weaker brain cells, making the brain a faster and more efficient machine. That's why you always feel smarter after a few beers.

Cliff on Cheers

Greg G schreef:[color=blue]
> I fixed the ones you mentioned, other than the upper case tags. Those
> are only in the upper part of the page. I also moved the first slide
> to the end. Interestingly, I now have the same problem, but the
> "breaks" in the grid are now in different places. You can view the
> result again if you like:
>
> http://mysite.verizon.net/gdguarino/indexnew.htm[/color]

Hey, I can't reach the website anymore... Will check again tomorrow.

--
Niek

Matt Silberstein schreef:
--
Excessive intake of alcohol, as we know, kills brain cells. >
-snip-

The proof is in this thread :-)

--
Niek

Matt Silberstein <RemoveThisPrefixmatts2nospam@ix.netcom.com> wrote:
[color=blue]
>--
>Matt Silberstein[/color]

[excessive sig snipped]

Trim to max 4 lines please.

--
Spartanicus

On Mon, 15 Aug 2005 18:39:10 +0200, 'sNiek <n.emmen@home.nl> wrote:
[color=blue]
>Greg G schreef:[color=green]
> > I fixed the ones you mentioned, other than the upper case tags. Those
>> are only in the upper part of the page. I also moved the first slide
>> to the end. Interestingly, I now have the same problem, but the
>> "breaks" in the grid are now in different places. You can view the
>> result again if you like:
>>
>> http://mysite.verizon.net/gdguarino/indexnew.htm[/color]
>
>Hey, I can't reach the website anymore... Will check again tomorrow.[/color]

Yes, it's not exactly a professional web hosting service. In any case,
I made an educated guess based on what I read here and fixed the
problem. I did it by adding 2 pixels to the height and width of the
div definition. I can't say that I know why that worked, but it did.

Thanks to all.

Greg.

On Mon, 15 Aug 2005 02:24:50 GMT, Greg G <gdguarino@verizon.net> wrote
or quoted :
[color=blue]
>http://mysite.verizon.net/gdguarino/indexnew.htm[/color]

odd. I could only view your site when I chopped the URL to
http://mysite.verizon.net/gdguarino/

On Tue, 16 Aug 2005 02:24:22 GMT, Roedy Green
<look-on@mindprod.com.invalid> wrote:
[color=blue]
>On Mon, 15 Aug 2005 02:24:50 GMT, Greg G <gdguarino@verizon.net> wrote
>or quoted :
>[color=green]
>>http://mysite.verizon.net/gdguarino/indexnew.htm[/color]
>
>odd. I could only view your site when I chopped the URL to
>http://mysite.verizon.net/gdguarino/[/color]

Sorry about that. I managed to fix the problem. Once the page worked
in IE I decided that I liked it enough to use it as the new home page.
I renamed the page "index" so there is no longer an "indexnew".

Greg

Greg G schreef:
[color=blue]
> Sorry about that. I managed to fix the problem.[/color]

Still have that strange sproblem though.

I rewrote the code, you can see it at:
http://members.home.nl/n.emmen/misc/gdguarino.html

But I just can't use "padding-top: 5px;" in the "a.slide,
a.slideh"-section (to lower the link-text a bit), the stuff falles apart
again when I use that.

But maybe you find it a good solution, do you see how the html and css
is trimmed down?

Cheers.

--
Niek

'sNiek wrote:[color=blue]
> Greg G schreef:
>[color=green]
> > Sorry about that. I managed to fix the problem.[/color]
>
> Still have that strange sproblem though.
>
> I rewrote the code, you can see it at:
> http://members.home.nl/n.emmen/misc/gdguarino.html[/color]

First let me thank you very much for your efforts on my behalf.
[color=blue]
> But I just can't use "padding-top: 5px;" in the "a.slide,
> a.slideh"-section (to lower the link-text a bit), the stuff falles apart
> again when I use that.
>
> But maybe you find it a good solution, do you see how the html and css
> is trimmed down?[/color]

I do. You applied the class "slide" to the A element instead. I wasn't
aware that that could be done. Did you notice that the html you edited
had already been changed since I asked my original question? My "new"
layout, with the div.slide definition enlarged by 2 pixels, does not
have the problem I asked about originally. The slides now line up in a
grid as I intended.

Your edited code looks good, apart from the text touching the top of
each box. I see that you put the "A" tags around the cobination of text
and picture. I originally had something similar which made the text
change color when you hover over the picture. Someone told me that that
was not good markup so I removed it. If it is actually OK, I may put it
back.

Thanks again.

Greg

g@risky-biz.com schreef:[color=blue]
> First let me thank you very much for your efforts on my behalf.[/color]

No thanx, it's actually a very good method top learn css when you try to
figure out somebody elses css-problems!
[color=blue]
> I do. You applied the class "slide" to the A element instead. I wasn't
> aware that that could be done.[/color]

You can edit just about any html-tag with css (don't just use div's or
span's!), you can 'lift' inline elemts to block-level and so on.

Did you notice that the html you edited[color=blue]
> had already been changed since I asked my original question? My "new"
> layout, with the div.slide definition enlarged by 2 pixels, does not
> have the problem I asked about originally. The slides now line up in a
> grid as I intended.[/color]

I still get the strange alignment though... using MS XP and IE 6

[color=blue]
> Your edited code looks good, apart from the text touching the top of
> each box.[/color]

Maybe someone else can take a look at that one??

I see that you put the "A" tags around the cobination of text[color=blue]
> and picture. I originally had something similar which made the text
> change color when you hover over the picture. Someone told me that that
> was not good markup so I removed it. If it is actually OK, I may put it
> back.[/color]

it is allright to put the a-tag around text and images, as long as you
don't put it around p-tags and other block-level elements. It's an
hierarchy thing...

[color=blue]
> Thanks again.[/color]

Cheers!

--
Niek

'sNiek schreef:[color=blue][color=green]
>> had already been changed since I asked my original question? My "new"
>> layout, with the div.slide definition enlarged by 2 pixels, does not
>> have the problem I asked about originally. The slides now line up in a
>> grid as I intended.[/color]
>
>
>
> I still get the strange alignment though... using MS XP and IE 6
>
>[color=green]
>> Your edited code looks good, apart from the text touching the top of
>> each box.[/color]
>
>
> Maybe someone else can take a look at that one??[/color]

Took one more, closer, look. Made a screendump and pasted it in Photoshop.
And what do ya know?
Take a closer look at the height of the pictures with
'portrait'-dimensions (height>width)! The height is one(!) pixel to much
I gave the images a height of 149 px and now it works!

And that's what causing the strange alignment, it wasn't a css-thing at
all!.

On http://members.home.nl/n.emmen/misc/gdguarino.html I've changed the
height of the images and assed a padding-top: 5px to "a.slide,
a.slideh"-section. It works!

Sometimes the answer is right under our noses (I have a big one...)

--
Niek

CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

re: CSS problem: Different appearance in IE, Firefox, Opera

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about