CSS - Absolute Middle & Other Positions Using Css2

hello all,
have a small problem with CSS when viewing the site with Firefox ... please help you are my last hope. Here is what Firefox doesnt like
Code:

background: url("images/tiler.gif") top y-repeat;

in IE everything looks fine but Firefox misses the image ... when i put a background color of the table ... the color is displayed but picture is not ... anybody has a solution ? I see Firefox doesnt like alot of css styles ... does anyone know a knowledge base with replacements or something like that ... ??? Thanks in advance guys !

What is the Difference between CSS2 and CSS3 ???

Hello,

I have attached my zip file and this is my first attempt on CSS2 (plenty of comments in the code), if some could look at it and recommend any suggestion and why that would be TERRIFIC.

My main question is, what happens if the is say...4-5 paragraphs of text on the home page, under "Company Overview", the page then looks stupid, how do i extend the containers around the #middleContainer so that it looks intact.

If you want to see the page it is also accessible at http://awo.loadedtechnologies.com/

Thanks you for your Help

Hi!

I need a very good CSS2 quick reference where I can rapidly see what is supported in which browsers and a short description of the property.

Thank you!

Hi,
Is it my imagination, or does position work different in IE6 and IE7/FF?

Seems like even if you say:

position: absolute;
top: 90px;
left: 516px;
width: 503px;
height: 636px;

it does not put it where you think it should in IE6....

Does anybody have a work around or any advice?

Does IE6 support the "position" attribute?

I'm scratching my head....

Hi all using this code to seperate a line into two sections not working right:
Code:

<div class="content">
<div style="float:left; width: 50%;">
	{$lang['unread']} <img src="templates/{$site_config['template']}/images/pm_marker_new.gif" alt="unread" /> | {$lang['read']} <img src="templates/{$site_config['template']}/images/pm_marker.gif" alt="read" />
</div>

<div style="float:right; width: 50%;">
	dsfdfds
</div>
</div>

Ends up like this:
http://i43.photobucket.com/albums/e397/clericvash/Clipboard02-4.jpg

(where the dffdfd and the small images on the left should be in the box?)

Hi,
I need help with a container div. Something is screwy in the way I have nested my divs and I think it has something to do with position: relative or absolute. I get the difference between the two, but not the relationship.
Can someone tell me what I'm doing wrong?
http://idiaonline.com/websites/taz/index.php


Code:

<div id="container">
 <div class="logo"></div><div class="top"></div>
 <div class="navline"></div>
<div class="navbar">

<div class="navsquare"><img src="images/faq.gif" alt="Taz Limousine Service Policy" width="43" height="41" /><br />F.A.Q.</div>
<div class="navsquare"><img src="images/fleet.gif" alt="Our Vehicles" width="43" height="41" /><br />Fleet</div>
<div class="navsquare"><img src="images/contact.gif" alt="Contact Us" width="43" height="41" /><br />Contact</div>
<div class="navsquare"><img src="images/maps.gif" alt="Maps & Directions" /><br />Maps</div>
</div>

<div class="content">
<div id="left">
 <div class="about">
   <p><br />
       <br />

     Taz Limousine is dedicated to dependable,courteous and quality service for business or personal transportation at competitive pricing. In order to achieve that goal in a secure and comfortable environment we rely on experienced chauffeurs and well maintained vehicles that meet city, state and federal regulations. Thank you for considering Taz Limousine Service.</p>
   <p>&nbsp;</p>
   <div class="weather">
     <div align="center">
    <br />
       <p></p>
     </div>
   </div>

   <div style="float:right; width:150px;"><br /><br />
     <h2>       Atlanta, GA</h2>
   </div>
 </div>
</div>
<div id="mid"> <div class="rotate"><img src="images/rotate/rotate.php" alt="Limousine Service Atlanta" /></div></div>
<div id="right"><div class="special">
  <h1>  Reserve A Limo Today!</h1>

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

and css
Code:

body, html {
font-family:Arial, Helvetica, sans-serif;
color:white;
height:100%;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;

}
a:link {
	color: #FFFFFF;
	text-decoration: none;
	font-weight:bold;
}
a:visited {
	text-decoration: none;
	color: #0066FF;
}
a:hover {
	text-decoration: underline;
	color: #0000FF;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
#container {
width:800px;
margin: 0px auto;
position:relative;
background:#000033;
border: thin #0000ff solid;
}
.top {
	height: 108px;
	width: 800px;
	position: absolute;
	left: 0px;
	top: 0px;
	background-image:url(images/gradient.jpg);
	background-repeat: repeat;
	z-index: 2;
}
.logo {
	background-image: url(images/taz-logo.gif);
	background-repeat: no-repeat;
	background-position:top;
	height: 60px;
	width: 305px;
	left: 0px;
	top: 25px;
	z-index:4;
	position:absolute;
}
.navline {
	background-image: url(images/blk-gradient.jpg);
	background-repeat: repeat-x;
	position: absolute;
	height: 42px;
	width: 100%;
	left: 0px;
	top: 108px;
	z-index: 3;
}
.content {
	background:#000033;
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	z-index: 1;
	border:solid #0000ff thin;
}
.navbar {
	position: absolute;
	height: 60px;
	left: 60%;
	top: 75px;
	z-index: 15;
	width:288px;
}
.navsquare {
	position:relative;
	float:left;
	height:60px;
	width:72px;
	background-image:url(images/nav-square.gif);
	background-repeat:no-repeat;
	text-align:center;
	font-size:9px;
	font-style:italic;
}

.about {
	position:relative;
	left:5%;
	top:40%;
	background-image:url(images/about_taz_limousine.gif);
	background-repeat:no-repeat;
	width:225px;
	height:150px;
	font-size:10px;
	padding-left:25px;
	z-index:4;
	}
.rotate {
	position:relative;

	top:10%;
	z-index:3;
}
.weather {
	position:absolute;
	background-color:#000033;
	top:159px;
	background-image:url(images/weatherbox.jpg);
	background-position:left;
	background-repeat:no-repeat;
	height:81px;
	width:94px;
	left: 6px;
}
.special {
	background-image:url(images/special.gif);
	width:271px;
	height:88px;
	position:absolute;
	text-align:center;
	top:15%;
	
}
#left {
float:left;
position:relative;
top:200px;
width:35%;
z-index:50;
}
#mid {
float:left;
position:relative;
top:175px;
width:35%;

}
#right {
float:left;
position:relative;
top:200px;
height:300px;
width:30%;
z-index:30;

}
h2 {
font-size:15px;
}
h1 {
font-size:18px;
font-variant:small-caps;
}

on my page http://tampabay-online.org/cetr/news/

the left side :

Code:

.content {
	position:relative;
	width:300px;
	margin-left: 155px;
	margin-top: 20px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3;
}

and the two on the right are :

Code:

#right {

	position:absolute;
	width:200px;
	top:20px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

#sidebar {

	position:absolute;
	width:200px;
	top:400px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

If someone has a their font bigger on the artists section then the div will grow and go under the sidebar div.

Any way to make these relative or fix that problem?

Thanks!

hey all,
hopefully someone in here will be able to help me. what I am interested in is how to tell a div to render at the base of the page, once I have it there I intend to make it float so that it is always at the base. does anyone know the x,y positions for the very bottom of the displayed window? any help would be greatly appreciated, thanks in advance.

Media
Example of the site BEFORE-HAND using Tables when viewed at 1280x1024. [Content Table Boxes Adjustable By Window Size]
Image File HERE

Since this archived picture version the following major changes have occured :
-- Removal of Tables in Favor of full CSS/DIV
-- Removal of PNG borders in favor of JavaScript/CSS Ones (Custom Coded)
-- Additional box beside the main content box.
-- W3C XHTML 1.1 Validatable.

Site Package (Includes CSS, HTML and JScripts)
Site Package HERE

Issues
Firefox
* Content overFlows for content when window is resized too small.
* Table width's are ignored (example : tIcon is set for width:32px yet expands/contracts)
* <br /> tag induces too much space (adjusting line-height is a sloppy fix + causes IE to bug)

IE 6
* Float bugs exist when window is resized too small.
& MANY insane bugs insue as a result of the float bugs shifting content.
* Main Box does not assume full 100% available space when no content is present


Both
* Header Content + Background Dissapears when horizontal scrollbars are used
* Alternate DIV ONLY fix needed for grid layout (instead of the table I slid in)
* Less absolute position approachs needed. (complicates strecthable atmosphere slightly)
* Float should be replaced with display:inline (if possible -- I can't figure out how.)

Comments
I've tried almost everything I can think of to fix these and
I am quite new to CSS/DIV structured sites. I would VERY
MUCH appreciate any help that can be offered. At the
moment, my target browsers are IE6 and Firefox.

Hey there!
I am having a problem changing my website's layout around a bit.

http://www.apollomix.com

As you can see, the main content area is wrapped in a div called "contentWrapper". This helps it maintain its shape, et cetera. It has a maximum width allotment as well, so that text (and other things) won't be stretched beyond beauty.

Basically, what I am trying to do is align #contentWrapper to the right of the screen (to the left of that dropdown menu, and other sidebars, such as the chat box). After I get that align working, I want to stick another div to the left that fills up the remaining margin, but not past it. Essentially, I am trying to make it look like this: (forgive the sloppy image doctoring)

Click me!

Basically, that big stretch of gray on the right should expand or shrink depending on the screen size... with anything bigger than contentWrapper's max-width resulting in the div stretching. Furthermore, it should be as tall as the screen, if possible, essentially touching the footer of the page.

Also, I'd like the banner to shift over as well, as you can see. Those lines should also expand. I'm assuming that could be done by adding another div to the left of the banner with the lines as its background, but I'm not entirely sure. What do you recommend?

Thanks for your help!

Here is the page: http://www.usdphidelts.com/alumni/map.php

There are <div> box's that need to be placed next to each other, one contains the map, the other contains the information about the icon click on the map.

It looks like with my current CSS, the two <div>'s names map and alumni are being placed on top of one another.

Any idea how I can get them to layout next to each other?

Thanks!

Hi guys!

Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work!

Here is what I'm trying to do, complete with pictures to help visualize things.

Example
This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides.

Code:

http://img708.imageshack.us/img708/2458/layoutstyle.jpg

The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page.

The dark blue outline shows a much higher resolution display

The light blue color shows the extra artwork only revealed to higher resolutions

The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move)

The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements.

The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness.


Problems
Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser".

The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place.

I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser).


If you want a real world example of what I'm trying to achieve, please view the following website:

Code:

http://us.blizzard.com/diablo3/?rhtml=y

unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language).

Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do.


P.S. Sorry about the weird links, seems new accounts can't use url's *shrugs*.

Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this?