...

View Full Version : CSS positioning in IE, Firefox



ramboangel11
02-28-2008, 05:42 AM
Hello! :) I'm having a problem to where, no matter what I do or what I try, I cannot get my navigation (which is coded in CSS and javascript) to align properly with the main content border. Right now, it looks perfect in Firefox, but in IE, it's overlapping the content div by anywhere between 5-10 pixels. :( I've tried everything there is to try under the sun, and I have no success.)

http://www.nevaehssweetestjoys.com/realestate/index.htm

Please view the source of my page to review the coding...

I really think it's just a CSS problem, which is why I posted this thread in this forum, but if anybody could help me, that would be lovely. :) Actually, it'd be tremendous!;)

CaptainB
02-28-2008, 06:21 AM
You have no doctype.
You have not validated (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nevaehssweetestjoys.com%2Frealestate%2Findex.htm&charset=%28detect+automatically%29&doctype=Inline&group=0) your page.
Your CSS should be in an external stylesheet.
And I guess the problems would be solved, if you used margins to position things instead of position:absolute;.

jcdevelopment
02-28-2008, 03:23 PM
you have your navigation positioned absolute! Which means if i have a different resolution or make my windo smaller the navigation will move and be in a different place.

you need a doctype in your html first then you need to add this to your css



* {
margin:0px;
padding:0px;
}


then adjust the navigation, let us know of anymore questions!

_Aerospace_Eng_
02-28-2008, 04:47 PM
* {
margin:0px;
padding:0px;
}


then adjust the navigation, let us know of anymore questions!

You don't need the units in that. 0 is 0.

jcdevelopment
02-28-2008, 04:52 PM
so 0 will just input it even if you are working in em's? I thought you had to specify a type of dimension no matter what? Huh, you learn something new each day! Thanks!

sobrien79
02-28-2008, 04:59 PM
You don't need the units. But I personally like to use them anyway. My thinking is that is 1 less rule that I have to worry about. And that it might confuse people coming in to CSS fresh.

"How come I see margin: 75px but margin: 0 somewhere else?"

At least if you always specify a unit you won't get a question with that.

Same thing goes with color: #000 and color: #000000. The first time I saw that I was confused as crap. Shortcuts should be intuitive....not confusing. So I don't use those.

jcdevelopment
02-28-2008, 05:03 PM
yeah, i remember the whole color thing and i always get confused with the whole background image, i still dont know why sometimes it will work and sometimes it wont like



background-image:url(path.gif)no-repeat top left;


see i dont know if that works or not because sometimes it will and sometimes it wont!

_Aerospace_Eng_
02-28-2008, 05:09 PM
Thats not correct. In order to use shorthand you need to use background:

background:url(path.gif) no-repeat top left;
Also you need a space between each value or IE won't play. Good resource here on shorthand properties.
http://www.htmldog.com/guides/cssintermediate/multivalue/

jcdevelopment
02-28-2008, 05:16 PM
ahhh, ok now i get it, thank you sir!!

ramboangel11
02-29-2008, 01:16 AM
Thank you! I did everything you said to do, and now the positioning is perfect. But, the navigation/sidebar won't slide out to the left...instead it pulls out to the right with the sidebartab staying in place. :(

This always seems to happen, lol

ajhauser
02-29-2008, 02:45 AM
Hey I just wanted to clarify something real quick:



* {
margin:0px;
padding:0px;
}

When added to a stylesheet, does this make the default margin/padding for every CSS element 0 AND HTML elements (<p>, <ul>, <form>) as well?

Thanks much.

_Aerospace_Eng_
02-29-2008, 03:13 AM
Hey I just wanted to clarify something real quick:



* {
margin:0px;
padding:0px;
}

When added to a stylesheet, does this make the default margin/padding for every CSS element 0 AND HTML elements (<p>, <ul>, <form>) as well?

Thanks much.
Huh? What do you think the CSS styles? It styles HTML elements.

ramboangel11
02-29-2008, 04:12 AM
nobody knows why it won't slide?

sorry, just feel like i'm being over-looked.

ajhauser
02-29-2008, 07:25 AM
Huh? What do you think the CSS styles? It styles HTML elements.

I'm asking for the specifics - if I create a class called ".border" to apply to something like an image, does the



* {
margin:0px;
padding:0px;
}

Style BOTH the class ".border" and the image? Visually the result is obviously the same regardless, I'm trying to understand what is specifically going on though - what the "*" applies to.

ajhauser
02-29-2008, 07:26 AM
And sorry ramboangel11, I didn't mean to ignore you I just need to find out about this.

:)

CaptainB
02-29-2008, 07:33 AM
The * applies to everything. So, when you say *{margin:0; padding:0;}, it resets the margins and padding in your document to make sure that you don't have spaces that you can't get rid of.

effpeetee
02-29-2008, 07:54 AM
Some of your CSS does not validate.

Maybe that you are using the wrong Doctype.

Frank

http://jigsaw.w3.org/css-validator/validator?uri=http&#37;3A%2F%2Fwww.nevaehssweetestjoys.com%2Frealestate%2Findex.htm&warning=1&profile=css21&usermedium=all


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<base href="http://www.nevaehssweetestjoys.com/realestate/index.htm"> - added by me.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Monica Sosebee -- ERA AllPointsRealty, Inc.</title>
<style type="text/css">
html {
margin: 0px;
padding: 0px;
}
body {
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #36177F;
scrollbar-3dlight-color: #36177F;
scrollbar-darkshadow-color: #36177F;
scrollbar-shadow-color: #36177F;
scrollbar-arrow-color: #36177F;
position:relative;
padding:0px;
font-size:100%;
}

h2{
color:#FFFFFF;
font-size:90%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold;
}

h2 span{
font-size:105%;
font-weight:normal;
}

ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
}

li a{
width:100%;
}

li a:link,
li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:70%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}

li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#wrapper {margin: 180px; }
#sideBar{
position: relative;
width: auto;
height: auto;
top: 200px;
right:-7px;

}

#sideBarTab{
float:left;
height:137px;
width:28px;
}

#sideBarTab img{
border:0px solid #FFFFFF;
}

#sideBarContents{ background-image: url(forsale.gif); }
overflow:hidden !important;
}

#sideBarContentsInner{
width:200px;
}

#transparency {filter: alpha(opacity=52); -moz-opacity: .49; background: #36177f; padding:5px;}

#content {font-family: verdana; font-size: 12px; color:#000000; padding:5px;}

#leftnav {font-family: verdana; font-size: 12px; color:#000000; padding:5px;}

A:link { text-decoration: none; color: #000000; }
A:visited { text-decoration: none; color:#000000; }
A:hover { text-decoration: none; color:#ffffff; }

</style>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="side-bar.js"></script>
</head>



<body bgcolor="#ffffff">

<div style="position: fixed; top:10px; left:250px; height: 160px; width: 800px; border: 0px solid #000000;">
<img src="header2.gif" alt="Monica Sosebee">
</div>




<div id="wrapper">
<div id="sidebar">
<a href="#" id="sideBarTab">
<img src="slide-button.gif" alt="sideBar" title="sideBar" style="padding:0px;">
</a>

<div id="sideBarContents" style="width: 0px;">
<div id="sideBarContentsInner">
<h2><span><img src="forsale.gif" alt="Monica Sosebee"></span></h2>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">House Listings</a></li>
<li><a href="#">Foreclosures</a></li>
<li><a href="#">School Information</a></li>
<li><a href="#">ERA in Espanol</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</div>
</div>
</div>
</div>

<div id="leftnav" style="position: fixed; top: 400px; left: 250px;">

<center>
<img src="forsale2.gif" alt="For Sale">
</center>
<center>
<img src="200029004.jpg" alt="For Sale">
</center><center>
5 Bedrooms, 4 Baths<BR> Swimming Pool</center><center>
Price: $300,000</center>
</div>




<div id="transparency" style="position: fixed; top: 180px; left:418px; height: 500px; width: 635px; border: 1px #36177f solid;"></div>
<div id="content" style="position: fixed; top: 180px; left:418px; height: 500px; width: 635px; border: 1px #36177f solid;">

I have the experience and knowledge to help you through what could be the most important financial decision most of us will ever make. I have been in the real estate business for 7 years now helping people buy and sell residential properties in Gwinnett and Barrow counties.<BR><BR>

I speak both Spanish and English fluently and am originally from Ecuador, South America. I have lived in Gwinnett county for 29 years and know the local areas to help you find that special home.<BR><BR>

As a wife and mother of three, I know how central the home is in our lives and how crucial it is to find the right match. When I am not spending time with my family encouraging them in their various activities, I love to garden and play tennis.<BR><BR>

Most importantly for my clients, I take pride in being a Realtor. As your real estate agent I must abide by a set of professional principles and serve clients fairly.<BR><BR>

I wish you luck in your adventure to find a home and encourage you to call on me with any of your real estate needs.

<HR>

<center>
Monica Sosebee<BR>
3274 Stone Mountain Highway<BR>
Snellville, Georgia 30078<BR>
Cell #: (678) 687-3874<BR>
Office #: (770) 972-7700 ext. 530<BR>
Fax #: (770) 972-8834<BR>
monicasosebee@yahoo.com
<BR><BR><BR><BR><BR>
Copyright info. here
</center>
</div>



</body>
</html>

ramboangel11
03-06-2008, 02:04 AM
Okay, I did everything you said and it shows up PERFECT in both IE7 and Firefox. However, in IE6 it shows it about 200px over to the left.

also, i know it's set to absolute positioning but when i try other types of positioning I have to use left: px; and then the menu doesn't slide correctly. :(

any ideas on these two problems?

Thanks for all the help so far!!! :)

ramboangel11
03-06-2008, 06:20 PM
nevermind. i got it. thanks anyway.

SerenitiSFV
03-06-2008, 06:58 PM
Oh, I just figured out your question!! Do you mean would this code:




<style>
* {margin:0;margin:0;}

#wrapper {width:650px;height:200px;}

img {float:left;margin:10px;}

.border {border:2px #000000 dashed;}

.border1 {border:2px #FF0000 solid;}
</style>

<body>

<div id="wrapper" class="border">

<img src="image.jpg" alt="image" width="500" height="125" class="border1" /></div>


</body>
</html>



result in removing the 10px margin around the image by styling 0 padding or margins in .border?

It will not.

However, if .border is directly styled with 0 padding and margins, it does pass it along.

This code stripped the margins from the image:


<!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>Untitled Document</title>
</head>

<style>
* {margin:0;margin:0;}

#wrapper {width:650px;height:200px;}

img {float:left;margin:10px;}

.border {border:2px #000000 dashed;}

.border1 {border:2px #FF0000 solid;}

.border2 {border:2px #FF0000 solid;margin:0;padding:0;}
</style>

<body>

<div id="wrapper" class="border">

<img src="image.jpg" alt="image" width="500" height="125" class="border2" /></div>


</body>
</html>

So it looks to me like * {margin:0;padding:0;} only applies to element selectors, not classes.

I tested it here:

http://www.ipoonramp.info/tests/css-test.html

Apostropartheid
03-06-2008, 08:31 PM
You do realize that it cascades?
i.e., if you specify something that changes the margin later on (like a class), the margin there is used. So if the * came at the bottom...

<!doctype html>
<head>
<title>The Universal Selector</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
* {
margin: 1em;
}
</style>
</head>
<body>
<p>This paragraph will be spaced by <code>2em</code> from the edge of the screen, even though <code>body</code> has no margin and padding before the universal selector.</p>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum