Div inside div works fine in Mozilla and Opera, but moves outside wrapper in Safari.

12 replies [Last post]

Sat, 2008-06-21 20:13

Mariana

Offline

newbie

Last seen: 14 years 6 weeks ago

Joined: 2008-06-21

Posts: 9

Points: 0

Hello, I was wondering if anyone could help me out:

I have this website: http://sadsparrow.com and as you can see, there's a main container div the size of the background image, and a content div where the text is. This works perfectly in both FF and Opera, however, in Safari the content div appears to think it's on it's own as opposed to within the container div, therefore it floats around, depending on the size of the window browser.

Here are my css stylesheet and my html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sad Sparrow</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="container">
<div id="content" class="flexcroll">
<div id="header">
<img src="images/headerhome.png" /></div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
 
Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Etiam vel nibh. Nulla facilisi. Mauris pharetra. Donec augue. Fusce ultrices, neque id dignissim ultrices, tellus mauris dictum elit, vel lacinia enim metus eu nunc.
 
Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.
 
Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis. Mauris sollicitudin, turpis in hendrerit sodales, lectus ipsum pellentesque ligula, sit amet scelerisque urna nibh ut arcu. Aliquam in lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla placerat aliquam wisi. Mauris viverra odio. Quisque fermentum pulvinar odio. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.
 
Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus. Nam cursus. Vivamus iaculis. Aenean risus purus, pharetra in, blandit quis, gravida a, turpis. Donec nisl. Aenean eget mi.</p>
</div>
</div>
</body>
</html>

@charset "UTF-8";
/* CSS Document */
 
body {
padding-top:35px;
height: 600px;
width: 800px;
background-color:#827E55;
background-image:url(images/background.jpg);
background-position:center;
background-repeat:no-repeat;
text-align:center;
 
}
 
#container {
text-align:left;
padding:22px;
width:800px;
height:600px;
position: absolute;
left: 50%;;
margin-left: -400px;
 
}
 
#content {
margin:0;
padding:0;
text-align:left;
width: 439px;
height: 530px;
background-image: url(images/azul.png);
background-repeat:no-repeat;
background-position:top;
overflow-y:scroll;
overflow-x:hidden;
 
}
 
 
#header {
margin: 0;
padding:0;
width: 438px;
height: 70 px;
text-align:left;
}
 
p{
margin: 30px;
text-align:justify;
font-family:"Times New Roman", Times, serif;
font-size:11px;
color: #def3f6;
}

I'm no expert, so I don't understand why Safari won't display it the same was as the other two. I'd really appreciate any help.

Oh, and if I may ask another question...is there actually a way to have a vertical scrollbar (without horizontal) that I can customize and that is compatible with all browsers, or am I asking for too much? Currently I haven't customized the scrollbar as the overflow - y only works with FF...

Thanks a lot!!

-Mariana

Tags:

CSS Layouts

Sat, 2008-06-21 23:36

Ed Seedhouse

Offline

Guru

Victoria British Columbia

Last seen: 1 year 25 weeks ago

Victoria British Columbia

Timezone: GMT-8

Joined: 2005-12-14

Posts: 3570

Points: 675

I can't even see or read a

I can't even see or read a single word of your site, so I suppose you just don't want old folks like me reading it...

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Sun, 2008-06-22 02:05

Mariana

Offline

newbie

Last seen: 14 years 6 weeks ago

Joined: 2008-06-21

Posts: 9

Points: 0

Oh....sorry about

Oh....sorry about that....perhaps I should make the text slightly bigger. I'm used to working on an average resolution. My site barely will have text though, it's more images than anything else. If I can ever fix it...

Sun, 2008-06-22 03:37

Ed Seedhouse

Offline

Guru

Victoria British Columbia

Last seen: 1 year 25 weeks ago

Victoria British Columbia

Timezone: GMT-8

Joined: 2005-12-14

Posts: 3570

Points: 675

Mariana wrote:Oh....sorry

Mariana wrote:

Oh....sorry about that....perhaps I should make the text slightly bigger.

No, you should let me see the font size I prefer, which is perfectly feasible with CSS. The web is not paper!

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Sun, 2008-06-22 07:31

Hugo

Offline

Moderator

London

Last seen: 7 years 31 weeks ago

London

Joined: 2004-06-06

Posts: 15668

Points: 2806

Ignoring the font-size

Ignoring the font-size issue? for the moment and focussing more on the question asked!....

Why have you positioned the container in that manner? it's a method employed to position an element centrally, but it's not a good one . To position centred to a parent the accepted and correct method is to use a set width and auto margins. Try changing your container rules and see whether Safari handles things differently.

Edit/ I notice that you have errors in your markup; these need to be fixed up, the script tag needs to be correctly placed in the section of the document and it needs to have it's 'type' attribute set to text/javascript

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Sun, 2008-06-22 07:42

Mariana

Offline

newbie

Last seen: 14 years 6 weeks ago

Joined: 2008-06-21

Posts: 9

Points: 0

body

body {
padding-top:35px;
height: 600px;
width: 800px;
background-color:#827E55;
background-image:url(images/background.jpg);
background-position:center;
background-repeat:no-repeat;
margin:auto;
 
}

I tried the auto margin but it makes no difference to Safari, it still floats around.

Sun, 2008-06-22 07:47

Hugo

Offline

Moderator

London

Last seen: 7 years 31 weeks ago

London

Joined: 2004-06-06

Posts: 15668

Points: 2806

If you re-read my comments

If you re-read my comments You'll notice that I didn't refer to 'body' but to 'container' also please note my edit to my original comment, markup errors require addressing.

Sun, 2008-06-22 07:57

Mariana

Offline

newbie

Last seen: 14 years 6 weeks ago

Joined: 2008-06-21

Posts: 9

Points: 0

Oh yes how silly of me to

Oh yes how silly of me to add it to the body....

That fixes it! It stays within the wrapper!

Now I need to figure out how to center it...but I think that's easier.

I looked at the markup in the head and added the script type, but it messed everything up, displaye donly the text and a header.

Thanks!!

Sun, 2008-06-22 08:09

Hugo

Offline

Moderator

London

Last seen: 7 years 31 weeks ago

London

Joined: 2004-06-06

Posts: 15668

Points: 2806

Mariana wrote:Oh yes how

Mariana wrote:

Oh yes how silly of me to add it to the body....

That fixes it! It stays within the wrapper!

Now I need to figure out how to center it...but I think that's easier.

I looked at the markup in the head and added the script type, but it messed everything up, displaye donly the text and a header.

Thanks!!

:? explain exactly what you changed; the script tag presently sitting between and needs moving.

Sun, 2008-06-22 08:27

Mariana

Offline

newbie

Last seen: 14 years 6 weeks ago

Joined: 2008-06-21

Posts: 9

Points: 0

<!DOCTYPE html PUBLIC

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sad Sparrow</title>
<script type="text/javascript">
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="flexcroll.js"></script>
</head>
 
 
 
<body>
<div id="container">

If I leave it like that it looks all wrong. If I remove the it looks normal.

Um.. back on the other topic..I've centered the container using left and right auto margins....but now the background image won't stay put. (It moves as I resize the window, as opposed to the container which stays in the center.)

Edit: If I add the position rule to the #container, it either ignores the auto margins or does nothing...

Thanks a lot for all of this, I really appreciate it.

Sun, 2008-06-22 08:46

#10

Hugo

Offline

Moderator

London

Last seen: 7 years 31 weeks ago

London

Joined: 2004-06-06

Posts: 15668

Points: 2806

Why does the image need to

Why does the image need to be on body? try placing it as background to container you might have to play around with positioning though.

'type' is an attribute it belongs on the original script tag not on it's own

Sun, 2008-06-22 19:49

#11

Mariana

Offline

newbie

Last seen: 14 years 6 weeks ago

Joined: 2008-06-21

Posts: 9

Points: 0

Edit: sorry, double post.

Sun, 2008-06-22 19:50

#12

Mariana

Offline

newbie

Last seen: 14 years 6 weeks ago

Joined: 2008-06-21

Posts: 9

Points: 0

Thanks Hugo, it's all in

Thanks Hugo, it's all in working order now, and I added the type to the script where it belongs.

http://sadsparrow.com

Thanks again!

Div inside div works fine in Mozilla and Opera, but moves outside wrapper in Safari.

I can't even see or read a

Oh....sorry about

Mariana wrote:Oh....sorry

Ignoring the font-size

body

If you re-read my comments

Oh yes how silly of me to

Mariana wrote:Oh yes how

<!DOCTYPE html PUBLIC

Why does the image need to

Edit: sorry, double post.

Thanks Hugo, it's all in

User login

Navigation