473,587 Members | 2,543 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 2007
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*********@bl ed.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=a lt.html> wrote:
To further the education of mankind, tomasio <fr*********@bl ed.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=a lt.html> wrote:
To further the education of mankind, tomasio <fr*********@bl ed.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*********@bl ed.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=a lt.html> wrote:
To further the education of mankind, tomasio <fr*********@bl ed.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*****@bigpon d.net.au>
wrote:
tomasio wrote:
On Sat, 10 Jun 2006 20:49:19 -0400, Neredbojias
<http://www.neredbojias .com/fliam.php?cat=a lt.html> wrote:
To further the education of mankind, tomasio <fr*********@bl ed.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

0
688
by: Lilou | last post by:
Hello this page works : http://lilou.leuwen.chez.tiscali.fr/testlilou.htm the source : .... a.link:hover div.test2 {display : block; position: absolute; z-index: 1000;
6
37122
by: Marcus Otmarsen | last post by:
Ok, the situation is as follows: I defined a <DIV> like: <div id="myid" style="position: absolute; height: 10; width: 10;"><img src="images/object.gif" height=10 width=10></div> This pane is used to move an object around on the web page by a javascript. As long as I define no further <div> pane everything works fine.
4
10333
by: He Shiming | last post by:
Hi, I'm wondering how can I use <DIV> to mimic a <TABLE>. In a bare <TABLE> without a width attribute, the width of the table get dynamically expanded according to the content. However, <DIV> doesn't have the same behavior. In the CSS of the DIV tag, I have: background: #FF0000; to see the area covered by <DIV>. It appears that <DIV> covers the entire row even if width
22
130084
by: stephen | last post by:
I have created an order form that users javascript to create a new html document when the customers clicks the "print page" button. Once the new document has been created it then prints the document and closes it with the following code: <body onload="window.print(); window.close();"> This works correctly (or at least the way I expect it to work under MS Internet Explorer, but it cuases Netscape to "crash"
44
2811
by: rhythmace | last post by:
W3C HTML validator passes this: .... <script type="text/javascript" src="foo.js"> <script type="text/javascript"> ....script in here... </script> ....
3
4196
by: John Pote | last post by:
1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a top level <divthen I can place it with CSS attribute 'left:', but this is a fixed offset. Is it possible to have a <divcentered in the browser window? 2. Verticle centering in <div>
5
1785
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 haven't not been able to find a solution to my collective dilemma, and I hope some of you fine folks here in these neck of the UseNet woods might be able to share some wisdom with a fellow coder. My questions are in regard to what are the proper...
6
1958
by: Steve | last post by:
I have a div with two - three paragrahs in it. Each paragraph has its own inline style tag with its own font size setting. When I set the last paragraph's font size the font sizes for ALL of the paragraphs change. Why? How can I stop it? I.E>
24
2368
by: Chris F.A. Johnson | last post by:
On 2008-07-09, Denis McMahon wrote: If the left-hand column contains any text, use em rather than px to size it. In CSS, less is more. Most problems are caused by specifying too much rather than too little. The default width of a block element is 100%; you don't need to specify it.
0
7927
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
7857
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8220
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8352
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
7981
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
5723
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
3846
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
3882
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2367
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

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.