Css postioning

El_mariachi · 03-06-2007 12:57pm #1

I am lost on this When i placed a image with absolute postioning is looks different in FF Than in IE7 and i not sure. And it looks different depening on the screen resolution i use. How do i place a image where i want it to be and make it Nearly the same for all browsers, Resolutions etc

DonkeyStyle \o/ · 03-06-2007 1:06pm

Use tables.

*gets coat*

El_mariachi · 03-06-2007 3:04pm

Yea thanks for that useless input there Donkey,
Tables are rarely used by anyone other that learners for website layout now.

Anyone know how to do it in, as the title said, CSS.

Is it absolute and them use relative to position ?

l3rian · 03-06-2007 3:15pm

show me all the code

use relative and em not px

to counter ie's bullshjt, use: '* html img{}' this will select only img elements on ie

download developer tools for ff, it has a good css editor built in

El_mariachi · 03-06-2007 3:44pm

i use Dream weaver CS3 ,CSS is a new thing for me. so not really sure of much of the things.

l3rian · 03-06-2007 6:40pm

ok, so you want to learn css?

go here: http://www.w3schools.com/css/default.asp

use this: http://notepad-plus.sourceforge.net/uk/site.htm

in future, if you post a question, please supply the code

bonkey · 03-06-2007 7:47pm

El_mariachi wrote:

When i placed a image with absolute postioning is looks different in FF Than in IE7 and i not sure.

Most likely because IE7's CSS support is dog-awful.

I'm torn between loving and hating CSS.

I love the flexibility for re-formatting sites it gives me, which is a godsend when differing customers want different stuff.

I hate the fact that for any given page, trying to make it browser agnostic almost-inevitably means writing multiple CSS layouts.

How do i place a image where i want it to be and make it Nearly the same for all browsers, Resolutions etc

The w3schools link already provided is pretty-damned useful because it notes what is supported by what version of what browser.

Goodshape · 03-06-2007 8:01pm

bonkey wrote:

I hate the fact that for any given page, trying to make it browser agnostic almost-inevitably means writing multiple CSS layouts.

It's annoying alright, but to be honest once you know the pitfalls to avoid, it's entirely possible to create a website that'll work cross-browser from the get go.

Well, I suppose there'll always be something that needs tweaked.. but I've found myself using IE specific sheets less and less these days as I've become accustomed to what works cross-browser, and what doesn't.

OP -- could well be an issue with padding and margin. Check if your image has CSS values for these and try adjusting them, see what happens.

El_mariachi · 04-06-2007 1:39pm

Sorry bout the wait ! was away last nite here is the code

@charset "utf-8";
/* CSS Document */
/*Main*/
html{ background: #000; }
body 
{ 
    background-color:Black;
	font-family: Arial,Verdana,sans-serif;
	font-size: 12px;
	color: #727272;
}
div#main1 {
  margin-left: 29%; /* Space for the left menu */
  margin-right: 29%; /* Space for the right menu */
}
/*Links*/
A:link,A:visited
{
text-decoration:none;
color:#CCCCCC
}
A:HOVER
{
color:FFFFFF;
text-decoration:underline
}

/*Divs*/
div.Header
{}
div.Nav
{}
div.Logo
{
padding-left:20px;
padding-right:30px
}
div.Main
{
background-image:url(file:///C|/Users/Desktop/bg.jpg) ;
background-repeat:no-repeat;
}
div.Footer
{
padding-left:30px;
padding-right:30px
}
div.footerPic
{}
div.Main_Sect
{
padding-left:27px;
padding-right:30px
}
/*Other*/

 ul.Nav{
	margin: 0;
	padding: 0;
	width: 364px;
	list-style: none;
	position: absolute;
	top: 75px;
	right: 452px;
}

 li.Nav{
	width: 90px;
	height: 29px;
	padding-left: 1px;
	float: left;
	text-align: center;
}

then the page code

<html><head>
<link href="mystyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="NewsBar">this is the news bar</div>

<div id="main1">

<div class="Header">
  <img src="file:///C|/Users/Desktop/header.jpg" width="582" height="82" alt="Header" />
  <div class="Nav">
<ul class="Nav">
<li class="Nav"><a href="index.asp">Home</a><a href="index.asp" class="active"></a></li> 
<li class="Nav"><a href="services.asp">Services</a></li> 
<li class="Nav"><a href="portfolio.asp">Portfolio</a></li> 
<li class="Nav"><a href="contact.asp">Contact</a></li> 
</ul>
  </div>
</div>
    <div class="Main">
<div class="Logo">
  <div align="left"><img src="file:///C|/Users/Desktop/Header2.jpg" width="542" height="175" alt="logo" /></div>
</div>
<!--Main information-->

	  <div class="Main_Sect">
  		<h3>Welcome header</h3>
         welcome note  </div>
        
        <div class="Main_Sect">
  		<h3>secton 2</h3>
more information
	  </div>
        <div class="Main_Sect">
          <p><em>section 3</em></p>
          more information
        </div>

        <div class="Main_Sect">
  		final section
 </div>
	</div>

<div class="footerPic"><img src="file:///C|/Users/Desktop/footer-background.jpg" width="582" height="19" alt="footer" />
</div>
</div>
</body>
</body>
</html>

i run my screen at 1440 x 900 and at this it looks grand in FF but IE 7 breaks it up abit.
Then if i change resolution its all over the shop in Both FF and IE

Css postioning

Comments