Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Any Idea for IE and Opera - Its working with Firefox ...

Reply
Thread Tools

Any Idea for IE and Opera - Its working with Firefox ...

 
 
Knut Krueger
Guest
Posts: n/a
 
      02-27-2008
Hi to all,
http://www.briefwexl.at/index.php
The short examples are left of the head with firefox.
With IE and opera they do not start under "Personen" but at the fist
place where the head is as small that the images have enough place.

To use a background for the H1 text for the pictures is a little tricky,
but the images are displayed like overflow hidden at the right boarder
(to the head).

First question?
does anybody understand what I would like to get

second question?
if yes any Idea to solve the problem without more space for the images?

Regards Knut
 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      02-27-2008
Knut Krueger wrote:

> http://www.briefwexl.at/index.php
> The short examples are left of the head with firefox.


Yup, that's what I see.

> With IE and opera they do not start under "Personen" but at the fist
> place where the head is as small that the images have enough place.


Yup, that's what I see in IE7.

> To use a background for the H1 text for the pictures is a little tricky,
> but the images are displayed like overflow hidden at the right boarder
> (to the head).


Now you lost me...

> First question?
> does anybody understand what I would like to get


It would help if you would say which is the desired end result - what
Firefox does, or what IE does? (Guessing Firefox)

> second question?
> if yes any Idea to solve the problem without more space for the images?


I would not have the 'head' as a series of floated images. I'd make it
one background image, and then make the combination of head and texts
a fixed width div and float the texts left inside of it.

Disadvantage could be that the text will cover the tip of the nose of
the man, but if you want to avoid that, you have only one option: make
sure there is enough space. Or do you really want the head to go over
the texts, like it does now in Firefox?

I have no idea what the rest of your page is gonna be like, but
currently, in Firefox, if you make the window narrower, the texts
disappear off the left side of the canvas...


--
Els http://locusmeus.com/
 
Reply With Quote
 
 
 
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      02-27-2008
Knut Krueger wrote:

> Hi to all,
> http://www.briefwexl.at/index.php
> The short examples are left of the head with firefox.
> With IE and opera they do not start under "Personen" but at the fist
> place where the head is as small that the images have enough place.


Possibly because you have a *comment* above the doctype. Known to fark
up Internet Exploder. Then you have an *incomplete* doctype in use.

See: http://www.w3.org/QA/2002/04/valid-dtd-list.html

and select HTML 4.01 Strict. Transitional is for legacy pages, not new
ones.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

--
-bts
-Friends don't let friends drive Vista
 
Reply With Quote
 
Knut Krueger
Guest
Posts: n/a
 
      02-27-2008
Els schrieb:
> Knut Krueger wrote:
>
>> http://www.briefwexl.at/index.php
>> The short examples are left of the head with firefox.

>
> Yup, that's what I see.
>
>> With IE and opera they do not start under "Personen" but at the fist
>> place where the head is as small that the images have enough place.

>
> Yup, that's what I see in IE7.
>
>> To use a background for the H1 text for the pictures is a little tricky,
>> but the images are displayed like overflow hidden at the right boarder
>> (to the head).

>
> Now you lost me...
>
>> First question?
>> does anybody understand what I would like to get

>
> It would help if you would say which is the desired end result - what
> Firefox does, or what IE does? (Guessing Firefox)


Yes firefox
>
>> second question?
>> if yes any Idea to solve the problem without more space for the images?

>
> I would not have the 'head' as a series of floated images. I'd make it
> one background image, and then make the combination of head and texts
> a fixed width div and float the texts left inside of it.


But then there is a small place for all images not only for those near
the nose. And I would like to use the place for a floating text from
other pages.
>
> Disadvantage could be that the text will cover the tip of the nose of
> the man, but if you want to avoid that, you have only one option: make
> sure there is enough space. Or do you really want the head to go over
> the texts, like it does now in Firefox?


No, the text comes from a Database and will be changed at every reload,
build with gd library with php. So I will choose a short texts or and a
smaller font from the database for the nose in the future.


>
> I have no idea what the rest of your page is gonna be like, but
> currently, in Firefox, if you make the window narrower, the texts
> disappear off the left side of the canvas...


The suggestion from the illustrator:
(it is only a static image)
http://localhost/briefwexl


Knut
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-27-2008
Knut Krueger wrote:

> The suggestion from the illustrator:
> (it is only a static image)
> http://localhost/briefwexl


"localhost" it *your* computer, the one you are most likely sitting in
front of. We will not be able access this URL.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      02-27-2008
Knut Krueger wrote:

>>> if yes any Idea to solve the problem without more space for the images?

>>
>> I would not have the 'head' as a series of floated images. I'd make it
>> one background image, and then make the combination of head and texts
>> a fixed width div and float the texts left inside of it.

>
> But then there is a small place for all images not only for those near
> the nose. And I would like to use the place for a floating text from
> other pages.


No, I did not say "fixed width as wide as it has room to the left of
the nose"

Fixed width div, as wide as you need for the face *and* the texts.
Then use the face as a background image to that div, and float the
texts left inside the same div. If you have the texts too wide then,
they will fall in front of the nose.

> No, the text comes from a Database and will be changed at every reload,
> build with gd library with php. So I will choose a short texts or and a
> smaller font from the database for the nose in the future.


Sounds complicated.

> The suggestion from the illustrator:
> (it is only a static image)
> http://localhost/briefwexl


As Jonathan said - we can't see that from here.

--
Els http://locusmeus.com/
 
Reply With Quote
 
Knut Krueger
Guest
Posts: n/a
 
      02-27-2008
Els schrieb:
>
> Sounds complicated.

but comlicated things are interesting
>
>> The suggestion from the illustrator:
>> (it is only a static image)
>> http://localhost/briefwexl


..... http://www.briefwexl.at .....



not the first time that I posted localhost ....

I will try to remember next time


Knut.
 
Reply With Quote
 
GTalbot
Guest
Posts: n/a
 
      02-28-2008
On 27 fév, 08:17, Knut Krueger <(E-Mail Removed)> wrote:
> Hi to all,


http://www.briefwexl.at/index.php

> The short examples are left of the head with firefox.
> With IE and opera they do not start under "Personen" but at the fist
> place where the head is as small that the images have enough place.
>
> To use a background for the H1 text for the pictures is a little tricky,
> but the images are displayed like overflow hidden at the right boarder
> (to the head).
>
> First question?
> does anybody understand what I would like to get
>


Yes I do.

> second question?
> if yes any Idea to solve the problem without more space for the images?
>


Yes I have.

First, understand that your design is over-constrained. You over-code
somewhat to control pixel-precise layout.

Second, it is always best to use default values instead of declaring
them.

.briefwexl {
display: block;
...
}

and

#text1 h1 {
background: transparent url(../png1.png) no-repeat top left;
display: block;
...
}

Here, you can safely remove display: block; from both css rules since
<div> and <h1> elements are block-level elements: that's by
definition.

3rd:
Use inheritance and inherited properties instead of redeclaring and
redefining CSS declarations over and over.

color and font-family are good examples of inheritable properties.
Just declare once on the body element and then you have no need to
repeat it later. In other words

h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquot e,nobr,b,i {
font-family:Arial,sans-serif,tahoma,Myriad,Optima; }

h4 { font-size:100%; font-weight:normal; color:black;}
h5 { font-size:90%; font-weight:bold; color:black;}

can be replaced (and better, correctly replaced) entirely with

body
{
background-color: rgb(254, 213, 1);
color: black;
font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
margin-right: 0;
}

Writing Efficient CSS
Rely on Inheritance
http://developer.mozilla.org/en/docs...inheritance.21

4th:
When you try to debug a webpage, one strategy is to surround each
major blocks with a border so that you can see what may be happening
in the rendering. Here, the .kopf block is too narrow to be holding
the images of the face and the 5 empty <h1> <span>s on its left (with
the pngX.png background images): you have an over-constrained layout,
not enough space... So, the 5 #textN h1 are pushed below in IE 7. I
wouldn't say this is a bug... but just that IE 7 float model is more
sensitive to constraints, pixel-precise layouts.

Solution:
just give your .kopf block a width of 40em instead of 35em.

.kopf
{
border: 2px solid blue;
clear: right;
float: right;
margin: 0em 0em 0em 1em;
width: 40em;
}

Another solution (strange) is to avoid, to remove

div {font-size: 92%;}

Anything under font-size: 100%;
is suspicious and is to be avoided except for fine-print.
Understand that now several browsers (Firefox 1+, Opera 8+, Safari 3,
K-meleon, Konqueror 3+, Icab 3+, Hv3 TKHTML alpha 16, etc) all offer
the users to set a minimum font-size for the rendering of webpage. So,
setting under 100% might not be rendered in the users' browsers.

Truth or consequences in web design:
Font-Size (excellent reading):
http://pages.prodigy.net/chris_beall...nt%20size.html

"1em (or 100%) is equivalent to setting the font size to the user's
preference. Use this as a basis for your font sizes, and avoid setting
a smaller base font size.
Avoid sizes in em smaller than 1em for text body, except maybe for
copyright statements or other kinds of 'fine print.'"
W3C Quality Assurance tip for webmasters:
Care Font Size
http://www.w3.org/QA/Tips/font-size


"For this year's list of worst design mistakes, (...) I asked readers
of my newsletter to nominate the usability problems they found the
most irritating. (...)
1. Legibility Problems
Bad fonts won the vote by a landslide, getting almost twice as many
votes as the #2 mistake. About two-thirds of the voters complained
about small font sizes or frozen font sizes;"
Top Ten Web Design Mistakes of 2005: 1. Legibility Problems
http://www.useit.com/alertbox/designmistakes.html

Regards, Gérard
 
Reply With Quote
 
GTalbot
Guest
Posts: n/a
 
      02-29-2008
On 28 fév, 18:42, GTalbot <(E-Mail Removed)> wrote:


> http://www.briefwexl.at/index.php



An even more compact, simplified, clarified, more optimized solution
is to replace all this:

#text1 h1
{
background: transparent url("png1.png") no-repeat top left;
}

#text2 h1
{
background: transparent url("png2.png") no-repeat top left;
}

#text3 h1
{
background: transparent url("png3.png") no-repeat top left;
}

#text4 h1
{
background: transparent url("png4.png") no-repeat top left;
}

#text5 h1
{
background: transparent url("png5.png") no-repeat top left;
}

<div id="text1"> <h1><span> </span></h1></div>

<div id="text2"> <h1><span> </span></h1></div>

<div id="text3"> <h1><span> </span></h1></div>

<div id="text4"> <h1><span> </span></h1></div>



with this:


<div id="text1"><img src="png1.png" alt=""></div>

<div id="text2"><img src="png2.png" alt=""></div>

<div id="text3"><img src="png3.png" alt=""></div>

<div id="text4"><img src="png4.png" alt=""></div>

I tested it with Firefox 2.0.0.12, Opera 9.26, Safari 3.0.4, IE 7 and
everything was laid out correctly, accordingly.

See for yourself:

http://www.gtalbot.org/BrowserBugsSe...Briefwexl.html

http://www.gtalbot.org/BrowserBugsSe...riefwexl2.html

Regards, Gérard
--
Internet Explorer 7 bugs
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
 
Reply With Quote
 
Knut Krueger
Guest
Posts: n/a
 
      03-10-2008
GTalbot schrieb:
> On 28 fév, 18:42,
> See for yourself:
>
> http://www.gtalbot.org/BrowserBugsSe...Briefwexl.html
>


Just a question:

Why is the border yround the body in IE complete earound the body and in
Mozilla only around the text "Hauptfenster -- TestText --" if I change
in your example:
body
{
background-color: rgb(254, 213, 1);
font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
margin-right: 0;
}

to
body
{
background-color: rgb(254, 213, 1);
font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
margin-right: 0;
border: 2px solid black;
}

Regards Knut
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Its a bird, its a plane, its.. um, an Attribute based System? thunk Ruby 0 04-01-2010 10:25 PM
Its a bird, its a plane, no ummm, its a Ruide thunk Ruby 1 03-30-2010 11:10 AM
Re: App idea, Any idea on implementation? Matthew_WARREN@bnpparibas.com Python 0 02-05-2008 05:50 PM
App idea, Any idea on implementation? Dr Mephesto Python 3 02-05-2008 06:55 AM
Comparisons of IE, Opera and Firefox on DOM (Javascript/CSS) support(Opera wins) Bob HTML 24 05-21-2006 05:31 PM



Advertisments