473,385 Members | 1,838 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,385 software developers and data experts.

CSS corner question

Hi all,

I'm having some issue displaying a "corner image" in FireFox.
I'd like to have a rounded left-top and right-bottom corner on my
website.
In IE, my code seems to work just fine, but FF puts image I use for
the right-bottom almost at the top of the page.

The website address is http://www.hermansict.nl/test/.

Here's the code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Hermans ICT</title>
</head>
<body>
<div class="container">
<div class="boven">
<div class="tlhoek">
</div>
<p>
Deze website is nog in ontwikkeling.
</p>
</div>
<div class="links">
</div>
<div class="midden">
</div>
<div class="rechts">
</div>
<div class="onder">
<p class="disclaimer">
<a href="#">Disclaimer</a>
</p>
</div>
<div class="brhoek">
</div>
</div>
</body>
</html>

CSS

body {
text-align: center;
font-family: Arial;
color: #000000;
background-color: #999999;
padding: 0;
margin: 0;
}

p {
margin: 0px;
}

p.disclaimer {
font-size: 60%;
}

div.boven p {
margin: 15px auto;
}

div.container {
width: 780px;
height: 600px;
top: 40px;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}

div.boven {
height: 60px;
width: 100%;
float: left;
}

div.tlhoek {
height: 10px;
width: 100%;
background: url(../img/tl.gif) no-repeat top left;
}

div.links {
text-align: left;
height: 500px;
width: 15%;
float: left;
}

div.midden {
text-align: left;
height: 500px;
width: 60%;
float: left;
}

div.rechts {
text-align: left;
height: 500px;
width: 25%;
float: left;
}

div.onder {
height: 30px;
width: 100%;
}

div.brhoek {
height: 10px;
width: 780;
background: url(../img/br.gif) no-repeat top right;
}

I've been adjusting borders, marins, padding, etc. for days now, but
I don't seem to get by this obstacle.
Any advice would be appreciated! Thanks in advance!

Ruud
--
--------------------------------- --- -- -
Posted with NewsLeecher v3.8 Beta 3
Web @ http://www.newsleecher.com/?usenet
------------------- ----- ---- -- -
Dec 22 '06 #1
2 1781
ru**********@gmail.com wrote:
Hi all,

I'm having some issue displaying a "corner image" in FireFox.
I'd like to have a rounded left-top and right-bottom corner on my
website.
In IE, my code seems to work just fine, but FF puts image I use for
the right-bottom almost at the top of the page.

The website address is http://www.hermansict.nl/test/.
Everything is floated except for "container" - this page needs redesigning.

The footer "onder" is also floated and your right bottom background
image is placed there in that DIV within which the Disclaimer anchor
would have gone if there were room for it.

The content of the footer "onder" (Disclaimer anchor) does not fit in
the line, so it looks for the next area down where it will fit, which
happens to be below the "links", "midden" and "rechts" DIVs and outside
of the "onder" box.

--
Gus
Dec 22 '06 #2
Thanks a bunch for your reply Gus!
I'll have another good look at it today.

Ruud
--
--------------------------------- --- -- -
Posted with NewsLeecher v3.8 Beta 3
Web @ http://www.newsleecher.com/?usenet
------------------- ----- ---- -- -
Dec 22 '06 #3

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

Similar topics

1
by: Tristan Miller | last post by:
Greetings. Here is the scenario: I have an element div.aside which is absolutely positioned in the bottom right corner of its containing box, div.frame. Said containing box is then resized...
2
by: Jason | last post by:
Hello I've created a form that serves as a front end for a DB. My question is how to resize the form, and have the control on the form resize themselves as i drag the form. I've got a status...
8
by: johkar | last post by:
I have two problems I cannot work out in the following tab code with Netscape 6. Problems are marked with all cap comments. One is that the background image is not shown in NS 6 (two places in...
28
by: Xah Lee | last post by:
Sometimes you want your text to flow into multiple columns, as in newspaper's layout. However, as of 2005-12 this is not yet possible. One can make-do by hard-coding it into HTML TABLE using...
14
by: dutch90 | last post by:
Hi I want to make my header table (with the logo and nav menu) start at 0,0. I tried body {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding:0px;} but I...
0
by: qwu2008 | last post by:
All, I wanted to create a browser helper object that has a clickable icon at the right corner of the browser (similar to the Google notebook icon at the right corner of the browser). When the user...
1
by: igpig | last post by:
Sorry if this has been asked before. I've searched the group and the FAQ and didn't find the answer. How can I retrieve x, y coordinates of the browser top left corner in Internet Explorer? ...
0
by: =?Utf-8?B?UmljaA==?= | last post by:
In a datagridview, the first column header cell is columnHeader(0), which is immediately to the right of the Top Left Corner Select All cell. And the first RowHeader cell is RowHeaderCell(0) which...
11
by: Simon van Beek | last post by:
Dear reader, By opening an application I get always the main Access window with the closing cross in the above right corner. Is there a possibility to make this closing cross invisible? ...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
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,...
0
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,...

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.