Why is text under div?

Dev Shed Forums Sponsor:

October 18th, 2012, 10:50 AM

timsharpe

Contributing User

Join Date: Apr 2001

Posts: 909

Time spent in forums: 5 Days 5 h 34 m 32 sec
Reputation Power: 0

Why is text under div?

Can someone please visit http://www.knowbrockville.com/?gtab=Auction in Firefox it looks fine but in IE the center content is under the right div why?

Thanks
Tim

__________________
Daily Deals from Kingston to Brockville and Cornwall Ontario. www.seawaydeals.com

October 18th, 2012, 01:52 PM

aeternus

For POny!

Join Date: Apr 2012

Location: Amsterdam

Posts: 416

Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114

did you happen to have updated your script?
in both ie 9,8,7 #centerbox collumn is in between #left and #right, just like in firefox

__________________
PHP Tutorial

October 20th, 2012, 05:37 AM

Heatleakz

Registered User

Join Date: Oct 2012

Location: Stockholm, Sweden

Posts: 16

Time spent in forums: 6 h 27 m 22 sec
Reputation Power: 0

Quote:

Originally Posted by timsharpe

Can someone please visit http://www.knowbrockville.com/?gtab=Auction in Firefox it looks fine but in IE the center content is under the right div why?

Thanks
Tim

Hi timsharpe,

The thing here is that Firefox and IE does not handle the page output in the same way. IE (usually less than version 8) needs special IE fixes in the CSS.

In your case it seems to be a positioning issue with IE, have you assigned relative positions to the left, right and centerized elements in your CSS?

For instance, you could do something like:

HTML

Code:

<div id="page-content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>

CSS

Code:

* {
padding: 0;
margin: 0;
border: 0;
outline: 0;
}

#page-content {
width: 1200px;
margin: 0 auto !important;
}

#page-content .left, 
#page-content .center, 
#page-content .right {
position: relative;
float: left;
margin: 5px;
}

#page-content .left,
#page-content .right {
width: 220px;
}

#page-content .center {
width: 720px;
}

Hope this helped you.

October 20th, 2012, 05:50 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,894

Time spent in forums: 6 Months 2 Days 20 h 4 m 5 sec
Reputation Power: 4192

Welcome to DevShed Forums, Heatleakz.

Are you aware that reset rules that use the universal selector can cause problems with form controls in some browsers? I recommend you read these:
http://snook.ca/archives/html_and_css/no_css_reset/
http://meyerweb.com/eric/thoughts/2...rmal-weirdness/

By the way, new users who have "Reputation Power: 0" can't give you any reputation points yet.

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

October 21st, 2012, 07:12 AM

Heatleakz

Registered User

Join Date: Oct 2012

Location: Stockholm, Sweden

Posts: 16

Time spent in forums: 6 h 27 m 22 sec
Reputation Power: 0

Quote:

Originally Posted by Kravvitz

Welcome to DevShed Forums, Heatleakz.

Thanks for the warm welcome, Kravvitz!

Why do you think people take advantage of placing a simple CSS reset in their stylesheet?

Basically a CSS reset is always needed and should be placed in the top of the css. The resetting is for progressive enhancement and does not have to cause problems, in fact, most developers (even I) use properties later in the CSS to adjust the form elements. Why do you even think there's a possibility to use your own CSS instead of the browsers built in? Or do you want every site to look the same?

"Since different browsers have different parameters your site will end up looking different depending on what browser you use."

CSS Reset (Note: I'm not using the !important override value, values can be adjusted later in the CSS)

Code:

* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

CSS properties for form elements

Code:

ul, ol {
padding: 3px;
margin: 5px;
}

form, input, button, select {
margin: 10px;
border: 1px;
}

It's called "Starting over from scratch".

I've done many websites with CSS resets and there hasn't been a problem for any of the visitors. However, if it happens that I've forgot the CSS reset and guess what! - The visitors starts complaining over that their IE browser doesn't have the same layout as their Chrome browser. How 'bout that?

Also, would you consider a CSS reset to decrease performance of a website? Then think over and stop using unneccesary elements or pictures that needs to be loaded.

PS: I'm not some "reputation troll" or some helpless person who needs reputation points to reclaim self confidence. In fact, I just think that reputation proves that I have given helpful answers and I don't see any problem with stating very simply and nice that people should not hesitate on giving me reputation points. Why do we even have reputation points?

Why is text under div?

Developer Shed Advertisers and Affiliates