473,326 Members | 2,182 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,326 software developers and data experts.

image nested in <div> appear to be 10px below the corresponding <div>-box

Dear NG-Readers,

I forgot to post the URL to the html-file and the linked CSS. Here
they are:
html: http://tomasio.at/temp/Unterseite_Templ2.html
CSS: http://tomasio.at/temp/stylesheet.css
correct display: http://tomasio.at/temp/Unterseite_Templ2a.jpg

First I want to apologize for crossposting this, but I got no idea
where this topic really belongs to. I have built a html-page with some
CSS. Anything behaves as expected, just the two images inside the
<div> with the class attributes "schraffur-bottom" and
"content-bottom" appear 10px below their corresponding containers. As
the two pics are 10px high in total, I think it has something to do
with the images. Anybody got an idea what I did wrong?
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"
Jun 9 '06 #1
8 1531
tomasio wrote:
Dear NG-Readers,

I forgot to post the URL to the html-file and the linked CSS. Here
they are:
html: http://tomasio.at/temp/Unterseite_Templ2.html
CSS: http://tomasio.at/temp/stylesheet.css
correct display: http://tomasio.at/temp/Unterseite_Templ2a.jpg

First I want to apologize for crossposting this, but I got no idea
where this topic really belongs to. I have built a html-page with some
CSS. Anything behaves as expected, just the two images inside the
<div> with the class attributes "schraffur-bottom" and
"content-bottom" appear 10px below their corresponding containers. As
the two pics are 10px high in total, I think it has something to do
with the images. Anybody got an idea what I did wrong?


Hi Tomasio,
The images in question are absolutely positioned, so if you don't like
where they are, just change their positions:
#schraffur-bottom {
position: absolute;
left: 305px;
top: 570px; /* changed from 582px */
width: 302px;
height: 6px;
}
#cont-bottom {
position: absolute;
left: 0px;
top: 576px; /* changed from 588px */
width: 802px;
height: 4px;
}

This resolves the problem for me in Firefox 1.5.

Cheers
Philip

Jun 9 '06 #2
On 9 Jun 2006 14:00:38 -0700, Ni*************@gmail.com wrote:
tomasio wrote:
Dear NG-Readers,

I forgot to post the URL to the html-file and the linked CSS. Here
they are:
html: http://tomasio.at/temp/Unterseite_Templ2.html
CSS: http://tomasio.at/temp/stylesheet.css
correct display: http://tomasio.at/temp/Unterseite_Templ2a.jpg

First I want to apologize for crossposting this, but I got no idea
where this topic really belongs to. I have built a html-page with some
CSS. Anything behaves as expected, just the two images inside the
<div> with the class attributes "schraffur-bottom" and
"content-bottom" appear 10px below their corresponding containers. As
the two pics are 10px high in total, I think it has something to do
with the images. Anybody got an idea what I did wrong?


Hi Tomasio,
The images in question are absolutely positioned, so if you don't like
where they are, just change their positions:
#schraffur-bottom {
position: absolute;
left: 305px;
top: 570px; /* changed from 582px */
width: 302px;
height: 6px;
}
#cont-bottom {
position: absolute;
left: 0px;
top: 576px; /* changed from 588px */
width: 802px;
height: 4px;
}

This resolves the problem for me in Firefox 1.5.

Cheers
Philip

Thank you Philip,

I already tried this solution but it still does not explain _why_ this
two images are in the wrong position while the others in the site are
not. Anybody got an idea?
Jun 10 '06 #3
To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:
I have built a html-page with some
CSS. Anything behaves as expected, just the two images inside the
<div> with the class attributes "schraffur-bottom" and
"content-bottom" appear 10px below their corresponding containers. As
the two pics are 10px high in total, I think it has something to do
with the images. Anybody got an idea what I did wrong?


Hi Tomasio,
The images in question are absolutely positioned, so if you don't like
where they are, just change their positions:
#schraffur-bottom {
position: absolute;
left: 305px;
top: 570px; /* changed from 582px */
width: 302px;
height: 6px;
}
#cont-bottom {
position: absolute;
left: 0px;
top: 576px; /* changed from 588px */
width: 802px;
height: 4px;
}

This resolves the problem for me in Firefox 1.5.

Cheers
Philip

Thank you Philip,

I already tried this solution but it still does not explain _why_ this
two images are in the wrong position while the others in the site are
not. Anybody got an idea?


For starters, try setting font-size:0; in the relevant divs.

--
Neredbojias
Infinity has its limits.
Jun 11 '06 #4
On Sat, 10 Jun 2006 20:49:19 -0400, Neredbojias
<http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:
To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:
I have built a html-page with some
CSS. Anything behaves as expected, just the two images inside the
<div> with the class attributes "schraffur-bottom" and
"content-bottom" appear 10px below their corresponding containers. As
the two pics are 10px high in total, I think it has something to do
with the images. Anybody got an idea what I did wrong?

Hi Tomasio,
The images in question are absolutely positioned, so if you don't like
where they are, just change their positions:
#schraffur-bottom {
position: absolute;
left: 305px;
top: 570px; /* changed from 582px */
width: 302px;
height: 6px;
}
#cont-bottom {
position: absolute;
left: 0px;
top: 576px; /* changed from 588px */
width: 802px;
height: 4px;
}

This resolves the problem for me in Firefox 1.5.

Cheers
Philip

Thank you Philip,

I already tried this solution but it still does not explain _why_ this
two images are in the wrong position while the others in the site are
not. Anybody got an idea?


For starters, try setting font-size:0; in the relevant divs.

Thanx a lot!

So there is a default font size in the css boxes, which influences the
height of the boxes? Strange.
Jun 11 '06 #5
tomasio wrote:
On Sat, 10 Jun 2006 20:49:19 -0400, Neredbojias
<http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:
To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:
I already tried this solution but it still does not explain _why_ this
two images are in the wrong position while the others in the site are
not. Anybody got an idea?


For starters, try setting font-size:0; in the relevant divs.

Thanx a lot!

So there is a default font size in the css boxes, which influences the
height of the boxes? Strange.


Tomasio,
It's not so strange. They use the default font size specified in your
browser. That's what it is there for, no?

Cheers
Philip

Jun 11 '06 #6
To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:
I already tried this solution but it still does not explain _why_ this
two images are in the wrong position while the others in the site are
not. Anybody got an idea?


For starters, try setting font-size:0; in the relevant divs.

Thanx a lot!

So there is a default font size in the css boxes, which influences the
height of the boxes? Strange.


One could wish that images were immune to this phenomena but that might be
impossible to impliment.

--
Neredbojias
Infinity has its limits.
Jun 12 '06 #7
tomasio wrote:
On Sat, 10 Jun 2006 20:49:19 -0400, Neredbojias
<http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:
To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:
> I have built a html-page with some
> CSS. Anything behaves as expected, just the two images inside the
> <div> with the class attributes "schraffur-bottom" and
> "content-bottom" appear 10px below their corresponding containers.

For starters, try setting font-size:0; in the relevant divs.

Thanx a lot!

So there is a default font size in the css boxes, which influences the
height of the boxes? Strange.


Not strange.

img is in-line element, as is font. The in-line box allows for
descenders, such as for g, j, p, q, y, etc. Hence the font-size=0; setting.

However declaring display:block; on the img element negates the need.

Louise
Jun 12 '06 #8
On Mon, 12 Jun 2006 05:26:39 GMT, boclair <bo*****@bigpond.net.au>
wrote:
tomasio wrote:
On Sat, 10 Jun 2006 20:49:19 -0400, Neredbojias
<http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:
To further the education of mankind, tomasio <fr*********@bled.de>
vouchsafed:

>> I have built a html-page with some
>> CSS. Anything behaves as expected, just the two images inside the
>> <div> with the class attributes "schraffur-bottom" and
>> "content-bottom" appear 10px below their corresponding containers.
For starters, try setting font-size:0; in the relevant divs.

Thanx a lot!

So there is a default font size in the css boxes, which influences the
height of the boxes? Strange.


Not strange.

img is in-line element, as is font. The in-line box allows for
descenders, such as for g, j, p, q, y, etc. Hence the font-size=0; setting.

However declaring display:block; on the img element negates the need.

Louise

Thanx Louise, with your help I found an elegant solution. And thanks
everyone else for explaining me the reason for this behaviour.

Jun 12 '06 #9

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

Similar topics

1
by: News | last post by:
Hi All, I'm trying to center a StyleSheet like below : <div id="CenterThis" style="position:absolute; top:40px; left:70px;">This should be centered</div> With this code : <script...
2
by: Matthew | last post by:
Hello! What is the best NS/IE compliant way to accomplish this using the least amount of javascript code? <div id="block1"> Group 1 Code </div> <div id="block2"> Group 2 Code </div>
61
by: Toby Austin | last post by:
I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will...
8
by: slim | last post by:
hi again all, i am still working on the website as mentioned in earlier threads and have hit another snag... http://awash.demon.co.uk/index.php http://awash.demon.co.uk/vd.css the php is...
3
by: Patrick S | last post by:
I am using IE 6.0. On a page, I have placed a contenteditable div which I want to use as a Rich Text Area. I am using the execCommand method of the document to control bold, italics,...
3
by: Timmy | last post by:
For some reason IE6 does inserts a minimum default height of a div. I'm trying to set a height:1px; which works fine on Mozilla. Does anyone know how to get IE to display the same 1px div height? ...
5
by: Stan R. | last post by:
Greetings. I have a couple of questions concerning CSS layouts, as apposed to the old <tablemethod for creating layouts . Even after spending the last few days searching all over Google Groups, I...
2
by: Richard Maher | last post by:
Hi, I'm trying to use the Visibility Style attribute for a Div to effectively PopUp a lightweight window with some additional context-sensitive information, when a user mouses over a given...
4
by: harryusa | last post by:
I am trying to center 2 images concentrically which are z-indexed to lay on top of each other making an image with a border from another image that has a transparent center. I need the images to be...
8
prino
by: prino | last post by:
Hi all, I've written code (in REXX) that takes files in legacy languages (PL/I, COBOL, z/OS assembler, etc) and converts them into HTML in a format similar to what's displayed in the z/OS ISPF...
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
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...
1
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: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
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...
1
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: 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...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.