473,320 Members | 2,052 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

What is Opera doing differently here?

http://www.iboi.nl/dev/

Tested with:
Safari 1.2.2 (Mac)
Firefox 0.8 (Mac)
IE 5.2.3 (Mac)
Camino 0.8 (Mac)
IE 6 (Windows)
Opera 7.5 (Mac)

The latter is the only one who displays the page differently.
All <div>'s are placed 8px down. Which is best seen by looking at the
background image; the other images should 'fit'.

It might be a bit risky to make a layout that is so dependent on pixel
precise positioning, but I though I avoided using code that would be
problematic.

I didn't have the guts to try it out yet in IE5/5.5/Win though :-)

--
marco
Jul 20 '05 #1
14 2159
mb*****@mac.kom.invalid (Marco Bakker) wrote:
http://www.iboi.nl/dev/

Tested with:
Safari 1.2.2 (Mac)
Firefox 0.8 (Mac)
IE 5.2.3 (Mac)
Camino 0.8 (Mac)
IE 6 (Windows)
Opera 7.5 (Mac)

The latter is the only one who displays the page differently.
All <div>'s are placed 8px down. Which is best seen by looking at the
background image; the other images should 'fit'.


Opera (correctly) uses default padding on the body element, other UAs
commonly use margin. (add padding:0 to your body style).

--
Spartanicus
Jul 20 '05 #2
mb*****@mac.kom.invalid (Marco Bakker) wrote:
http://www.iboi.nl/dev/

Tested with:
Safari 1.2.2 (Mac)
Firefox 0.8 (Mac)
IE 5.2.3 (Mac)
Camino 0.8 (Mac)
IE 6 (Windows)
Opera 7.5 (Mac)

The latter is the only one who displays the page differently.
All <div>'s are placed 8px down. Which is best seen by looking at the
background image; the other images should 'fit'.
You've set body {margin: 0 auto;}
Opera doesn't have default margin on body, it has default padding.
So add padding: 0; and all will be well.
It might be a bit risky to make a layout that is so dependent on pixel
precise positioning, but I though I avoided using code that would be
problematic.
Biggest problems I can see are:
1.the complete lack of useful alt attributes. With images turned off
the page is useless.
2. Text size set in pixels, which means that IE users can't easily
resize it. And considering that you've set the text size to a tiny
size at least some of them are going to need to resize it before they
can read anything.
I didn't have the guts to try it out yet in IE5/5.5/Win though :-)


The content is left aligned, because Win IE5.x doesn't support
margin-left: auto; margin-right: auto;

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #3
Els
Steve Pugh wrote:
mb*****@mac.kom.invalid (Marco Bakker) wrote:
http://www.iboi.nl/dev/

Biggest problems I can see are:
1.the complete lack of useful alt attributes. With images turned off
the page is useless.
2. Text size set in pixels, which means that IE users can't easily
resize it. And considering that you've set the text size to a tiny
size at least some of them are going to need to resize it before they
can read anything.


3. Slips off left side in Gecko if window is narrower than
750px.

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

Jul 20 '05 #4
Spartanicus <me@privacy.net> wrote:
mb*****@mac.kom.invalid (Marco Bakker) wrote:
http://www.iboi.nl/dev/

Tested with:
Safari 1.2.2 (Mac)
Firefox 0.8 (Mac)
IE 5.2.3 (Mac)
Camino 0.8 (Mac)
IE 6 (Windows)
Opera 7.5 (Mac)

The latter is the only one who displays the page differently.
All <div>'s are placed 8px down. Which is best seen by looking at the
background image; the other images should 'fit'.


Opera (correctly) uses default padding on the body element, other UAs
commonly use margin. (add padding:0 to your body style).


Thanks! Great.

--
marco
Jul 20 '05 #5
Steve Pugh <st***@pugh.net> wrote:
mb*****@mac.kom.invalid (Marco Bakker) wrote:
http://www.iboi.nl/dev/

Tested with:
Safari 1.2.2 (Mac)
Firefox 0.8 (Mac)
IE 5.2.3 (Mac)
Camino 0.8 (Mac)
IE 6 (Windows)
Opera 7.5 (Mac)

The latter is the only one who displays the page differently.
All <div>'s are placed 8px down. Which is best seen by looking at the
background image; the other images should 'fit'.
You've set body {margin: 0 auto;}
Opera doesn't have default margin on body, it has default padding.
So add padding: 0; and all will be well.
It might be a bit risky to make a layout that is so dependent on pixel
precise positioning, but I though I avoided using code that would be
problematic.


Biggest problems I can see are:
1.the complete lack of useful alt attributes. With images turned off
the page is useless.


Yes, the 'alt' text was on the to do list. I test in Lynx always, so
that I would have noticed at some stage.
2. Text size set in pixels, which means that IE users can't easily
resize it. And considering that you've set the text size to a tiny
size at least some of them are going to need to resize it before they
can read anything.
0.8em is what I think I will be using.
I didn't have the guts to try it out yet in IE5/5.5/Win though :-)


The content is left aligned, because Win IE5.x doesn't support
margin-left: auto; margin-right: auto;


That will break the whole layout. Back to the drawing board I'm afraid.
Absolute positioning, no auto centering, yikes.

Thanks Steve.
--
marco
Jul 20 '05 #6
Els
Marco Bakker wrote:
Steve Pugh <st***@pugh.net> wrote:
mb*****@mac.kom.invalid (Marco Bakker) wrote:
http://www.iboi.nl/dev/

I didn't have the guts to try it out yet in IE5/5.5/Win though :-)


The content is left aligned, because Win IE5.x doesn't support
margin-left: auto; margin-right: auto;


That will break the whole layout. Back to the drawing board I'm afraid.
Absolute positioning, no auto centering, yikes.


Not if you set text-align:center to the body.
That will center align the page in IE5, while the auto
margins do it for the rest of the browsers.

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

Jul 20 '05 #7
Els <el*********@tiscali.nl> wrote:
Steve Pugh wrote:
mb*****@mac.kom.invalid (Marco Bakker) wrote:
http://www.iboi.nl/dev/

Biggest problems I can see are:
1.the complete lack of useful alt attributes. With images turned off
the page is useless.
2. Text size set in pixels, which means that IE users can't easily
resize it. And considering that you've set the text size to a tiny
size at least some of them are going to need to resize it before they
can read anything.


3. Slips off left side in Gecko if window is narrower than
750px.


You mean the background starting to 'travel'? That's fine. I tested it
on a 800x600 laptop and it was fine. I have to draw a line somewhere
(with this design) and that is at 800x600.

--
marco
Jul 20 '05 #8
Els
Marco Bakker wrote:
Els <el*********@tiscali.nl> wrote:

http://www.iboi.nl/dev/

3. Slips off left side in Gecko if window is narrower than
750px.


You mean the background starting to 'travel'? That's fine. I tested it
on a 800x600 laptop and it was fine. I have to draw a line somewhere
(with this design) and that is at 800x600.


No, the background isn't important.
The content slips off screen to the left, where the
scrollbar can't get to it.
Easy to avoid by setting a border on the whole page. Set the
border in the same color as the background and noone will
notice.
Another method is setting a min-width to the page, as the
problem only occurs in Gecko browsers, it's not a problem
that IE doesn't read that.

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

Jul 20 '05 #9
mb*****@mac.kom.invalid (Marco Bakker) wrote:
Steve Pugh <st***@pugh.net> wrote:
mb*****@mac.kom.invalid (Marco Bakker) wrote:
>http://www.iboi.nl/dev/
2. Text size set in pixels, which means that IE users can't easily
resize it. And considering that you've set the text size to a tiny
size at least some of them are going to need to resize it before they
can read anything.
0.8em is what I think I will be using.


Well, at least that's only 20% smaller than the browser default,
rather than the 38% smaller that you have at the moment (assuming
factory settings, could be more or less for individual users). So a
step in the right direction.
>I didn't have the guts to try it out yet in IE5/5.5/Win though :-)


The content is left aligned, because Win IE5.x doesn't support
margin-left: auto; margin-right: auto;


That will break the whole layout. Back to the drawing board I'm afraid.


Not really. The page is still alid out as you specified, just on the
left rather than in the middle.
Absolute positioning, no auto centering, yikes.


There's no need to use absolute positioning here. Just set text-align:
center; on body (and text-align: left on all the children) and IE5.x
will (incorrently) center it.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #10
Steve Pugh <st***@pugh.net> wrote:
mb*****@mac.kom.invalid (Marco Bakker) wrote:
Steve Pugh <st***@pugh.net> wrote:
mb*****@mac.kom.invalid (Marco Bakker) wrote:

>http://www.iboi.nl/dev/

2. Text size set in pixels, which means that IE users can't easily
resize it. And considering that you've set the text size to a tiny
size at least some of them are going to need to resize it before they
can read anything.


0.8em is what I think I will be using.


Well, at least that's only 20% smaller than the browser default,
rather than the 38% smaller that you have at the moment (assuming
factory settings, could be more or less for individual users). So a
step in the right direction.
>I didn't have the guts to try it out yet in IE5/5.5/Win though :-)

The content is left aligned, because Win IE5.x doesn't support
margin-left: auto; margin-right: auto;


That will break the whole layout. Back to the drawing board I'm afraid.


Not really. The page is still alid out as you specified, just on the
left rather than in the middle.
Absolute positioning, no auto centering, yikes.


There's no need to use absolute positioning here. Just set text-align:
center; on body (and text-align: left on all the children) and IE5.x
will (incorrently) center it.

Steve


Els and Steve your input has been great.

I'll put the site back up later. When I am sure I get the job to build
the original designer's PDF in HTML, which I did now with your help :-)

--
marco
Jul 20 '05 #11
While sitting in a puddle Els scribbled in the mud:
No, the background isn't important.
The content slips off screen to the left, where the
scrollbar can't get to it.
Easy to avoid by setting a border on the whole page. Set the
border in the same color as the background and noone will
notice.
Another method is setting a min-width to the page, as the
problem only occurs in Gecko browsers, it's not a problem
that IE doesn't read that.


I thought for a minute that you had forgotten that which your master had
taught you. Your second paragraph proved you to be a worthy student. :o)

--
Duende
I'll never do that again.
Jul 20 '05 #12
Els
Duende wrote:
While sitting in a puddle Els scribbled in the mud:
No, the background isn't important.
The content slips off screen to the left, where the
scrollbar can't get to it.
Easy to avoid by setting a border on the whole page. Set the
border in the same color as the background and noone will
notice.
Another method is setting a min-width to the page, as the
problem only occurs in Gecko browsers, it's not a problem
that IE doesn't read that.


I thought for a minute that you had forgotten that which your master had
taught you. Your second paragraph proved you to be a worthy student. :o)


Thanks :-D

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

Jul 20 '05 #13
What is a min-width? How does one set it?

On Sun, 30 May 2004 00:28:50 +0200, Els <el*********@tiscali.nl> wrote:
Duende wrote:
While sitting in a puddle Els scribbled in the mud:
<snip>
Another method is setting a min-width to the page, as the problem only
occurs in Gecko browsers, it's not a problem that IE doesn't read that.

I thought for a minute that you had forgotten that which your master
had taught you. Your second paragraph proved you to be a worthy
student. :o)


--
http://www.his.com/~merkin
Jul 20 '05 #14
Els
Maury Merkin wrote:
On Sun, 30 May 2004 00:28:50 +0200, Els <el*********@tiscali.nl> wrote:
Duende wrote:
While sitting in a puddle Els scribbled in the mud:
<snip>
Another method is setting a min-width to the page, as the problem
only occurs in Gecko browsers, it's not a problem that IE doesn't
read that.

I thought for a minute that you had forgotten that which your
master had taught you. Your second paragraph proved you to be a
worthy student. :o)


What is a min-width? How does one set it?


#container{
min-width:500px;
}

(if the div containing the page has id="container")

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

Jul 20 '05 #15

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: What-a-Tool | last post by:
I'm going out out of my mind trying to get this to work with no luck. The error message I get is at the bottom. Can someone please tell me what I'm doing wrong here. I've tried this a million...
9
by: andrew | last post by:
Hi, I posted this message recently, but received no response, so I figured I'd try again. I can't find anybody who can tell me what's going on here. I'm having a problem with fieldsets in IE...
4
by: Paul | last post by:
HI! I have a script that does not seem to work. can someone tell me what I am doing wrong here? <script language="JavaScript"> function firefoxautofix(){ parent.window.resizeBy(-1,-1)...
3
by: subnet | last post by:
I'm trying to write a very simple program that uses a signal-based synchronization between two processes. Here's it: ----------------------------------------------- /* The world's simplest...
4
by: joey.powell | last post by:
I have run into a problem with one of my aspx pages. When I run the page, I get a "Server Tag Is Not Well Formed" error. This message goes away when I remove the line with the problem. This simply...
6
by: Hitesh Joshi | last post by:
Hi, I wanted to pass a popup mesage using windows messagin service to five PCs. If I just use following then PC1 gets the popup service message: import os os.system('net send PC1 "Message"')
1
by: shapper | last post by:
Hello, On my Page_Init event I have the following: Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Init Dim pContainer As New Panel AddHandler...
10
by: JoeC | last post by:
I have been programming for a while and I have seen this syntax before and I copied this from a book but the book didn't explain what is going on here. class engine{ protected: static engine*...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.