IE7 beta 3 weird CSS behaviour

[Bernhard Sturm]

hi group,
I am currently designing a site that will provide leisure information in
a certain region (berne, switzerland). I have just finished building the
XHTML-structure (yes, it's valid) and the raw CSS definitions in a
template. This template will be populated with results from a database.
However, the template renders perfectly under the following UAs: FF
1.5.04, Netscape 7+, IE 6, but not with IE7beta3.
With IE7 beta 3 the main menu is being shifted to the far left of the
design. I tried several different techniques to position the
div#mainmenu (which contains the ul li list of the main menu) such as
using margins and paddings, but without success.
Maybe someone from the group could point me to something I overlooked,
or maybe this behaviour is just due to the beta status of IE7?
Any help is much appriciated (and critiques as well

cheers
bernhard

 

[Jim Moe]

However, the template renders perfectly under the following UAs: FF
1.5.04, Netscape 7+, IE 6, but not with IE7beta3.
With IE7 beta 3 the main menu is being shifted to the far left of the
design. [...]
Any help is much appriciated (and critiques as well

IE7 is in beta. Do not make code changes to comply with its problems as
they will change later on.
Create a test case and report it to MS.
And how could we critique it?

 

[Bernhard Sturm]

IE7 is in beta. Do not make code changes to comply with its problems as
they will change later on.
Create a test case and report it to MS.
And how could we critique it?

by telling me, whether you liked my coding, or if you agree on the way I
used CSS. just the ordinary procedure

(and in case somebody was missing the url: http://test.tour-de-berne.ch)

cheers
bernhard

 

[BlueC]

by telling me, whether you liked my coding, or if you agree on the way I
used CSS. just the ordinary procedure

(and in case somebody was missing the url: http://test.tour-de-berne.ch)

You didn't post the URL in the first post, hence the question "how could
we critique it?"

 

[Bernhard Sturm]

You didn't post the URL in the first post, hence the question "how could
we critique it?"

ooops.. yes, thanks! I just discovered this. sorry, my mistake.

 

[Jim Moe]

by telling me, whether you liked my coding, or if you agree on the way I
used CSS. just the ordinary procedure

(and in case somebody was missing the url: http://test.tour-de-berne.ch)

Yes, I obscurely meant the URL was missing.
Quick critique (viewed with Seamonkey v1.0.2):
- Use of Transitional rather than Strict DTD. Few and minor errors with
Strict so there is no valid reason not to use Strict.
- Image "tdb_wappen.png" does not line up with the border. It would be
better to crop the image so the alignment is not so critical.
Also part of that image is pushed off the left side of the viewport so
that the T in Tour is not visible. Is that intentional?
- Several missing images. The ALT text is not meaningful.
- Tiny, tiny font size.
- I guess the weather report is not live yet?

- The page adapts reasonably well to font scaling. I went to 50% and 200%
without noticing any significant layout problems.

- Server problem:
Not Found
The requested URL /ausflugstipp/index.php was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use
an ErrorDocument to handle the request.

 

[Bernhard Sturm]

Quick critique (viewed with Seamonkey v1.0.2):
- Use of Transitional rather than Strict DTD. Few and minor errors with
Strict so there is no valid reason not to use Strict.

you are right, I was thinking of switching it to the strict DTD.

- Image "tdb_wappen.png" does not line up with the border. It would be
better to crop the image so the alignment is not so critical.
Also part of that image is pushed off the left side of the viewport so
that the T in Tour is not visible. Is that intentional?

not really the T should be positioned over the tdb_wappen.png (at
least it does it in FF, IE...)

- Several missing images. The ALT text is not meaningful.

that is also true, as the page is only a template for the PHP/MySQL
integration team, I did not provide meaningful or complete ALT-texts.

- Tiny, tiny font size.
- I guess the weather report is not live yet?

no it isn't yet. this will be implemented at a later stage of the
development of the site.

- Server problem:
Not Found
The requested URL /ausflugstipp/index.php was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use
an ErrorDocument to handle the request.

no link should actually work, as there are only dummy-links (see above,
it's just a template for the dynamic content integration team).

thank's for the time you took for the critique of my site. I will take
your observations into account.

bernhard

 

[Rik]

hi group,
I am currently designing a site that will provide leisure information
in a certain region (berne, switzerland). I have just finished
building the XHTML-structure (yes, it's valid) and the raw CSS
definitions in a template. This template will be populated with
results from a database. However, the template renders perfectly
under the following UAs: FF
1.5.04, Netscape 7+, IE 6, but not with IE7beta3.
With IE7 beta 3 the main menu is being shifted to the far left of the
design. I tried several different techniques to position the
div#mainmenu (which contains the ul li list of the main menu) such as
using margins and paddings, but without success.
Maybe someone from the group could point me to something I overlooked,
or maybe this behaviour is just due to the beta status of IE7?
Any help is much appriciated (and critiques as well

Another problem:
li#pageprint a, li#empfehlen a, li#zufallstipp a, li#similar a {
background-repeat: no-repeat;
background-color: #ECFCFF;
font-size:0em;<------------------------------
display:block;
height:12px;
letter-spacing: 10em;<-----------------------
text-align:right;
color:#ECFCFF;
margin:0px 0px 0px 20px;
}

Why would you want to do that?

Opera disregards the first statement because of my minumum font-size
required (6px), and obeys the second statement:
http://www.rwasmus.nl/opera.png

In this case an image with an alt attribute, or a display:none (set to
another value in an aural stylesheet) to a certain element is a whole lot
better then trying to hide it with a zero font-size.

Grtz,

 

[BootNic]

[snip]

Opera disregards the first statement because of my minumum font-size
required (6px), and obeys the second statement:
http://www.rwasmus.nl/opera.png

[snip]

Another Opera view, min font size 12px, screen width 2048.

Notice the text over the images, makes the image look distorted.

--
BootNic Sunday, July 16, 2006 11:34 PM

One must learn by doing the thing, for though you think you know it,
you have no certainty until you try.
*Aristotle*

 

[BootNic]

news:[email protected].... [snip]

Another Opera view, min font size 12px, screen width 2048.

Notice the text over the images, makes the image look distorted.

A link would be nice...

http://files.photojerk.com/BootNic/BootNic-0381.png

 

[Jim Moe]

not really the T should be positioned over the tdb_wappen.png (at
least it does it in FF, IE...)

You do position it with -19px. Enough to push it off the side.

no link should actually work, as there are only dummy-links (see above,
it's just a template for the dynamic content integration team).

The server problem is that there is no ErrorDocument handler, or that it
is incorrectly specified.

 

[Bernhard Sturm]

Another problem:
li#pageprint a, li#empfehlen a, li#zufallstipp a, li#similar a {
background-repeat: no-repeat;
background-color: #ECFCFF;
font-size:0em;<------------------------------
display:block;
height:12px;
letter-spacing: 10em;<-----------------------
text-align:right;
color:#ECFCFF;
margin:0px 0px 0px 20px;
}

Why would you want to do that?

because I wanted to hide the text as it is not needed in visual UAs...
however Opera seems to ignore font-size:0em;. any ideas why?

Opera disregards the first statement because of my minumum font-size
required (6px), and obeys the second statement:
http://www.rwasmus.nl/opera.png

yes I can see that. how could I resolve this issue? I want to make the
text invisible, but the a should still be present.

In this case an image with an alt attribute, or a display:none (set to
another value in an aural stylesheet) to a certain element is a whole lot
better then trying to hide it with a zero font-size.

I can't apply img:hover to an image because of IEs inability, and I
definitely don't want to use JS for a rollover effect. display:none
would disable the presentation of the <a href... which is a bad idea,
too...

but I agree: it's a bad workaround I am using here. Maybe any other
ideas to solve this issue?

cheers for the comments.
bernhard