CSS - Background As Center Column

Hello! I am in need of some help with my css. I know, I am a total newbie but need some help with getting the css working properly. It seems that some parts work for IE and other parts work for Firefox. It seems like my left bar shows differently in IE and Firefox. Furthermore I have checked with IE on Mac and the main body doesn't show correctly either. It is displayed too short, doesn't fill the box. If anyone please could take a look at the code and see if they can help me I would appreciate it.

Please anyone help me. You can see the page at:
http://www.galakse.no/test/index.php/tscm/news
The css is located he
http://www.galakse.no/test/design/tscm/stylesheets/tscm.css

Any and all help is very much appreciated!

Thank you!

Hey all,

I have been working on a site in CSS which looks pretty much how we want it to look in FF, however IE is giving me all sorts of problems.

If you look at the following page http://www.mobileshop.com/3phones.com/viewphone.php in firefox you can see that the middle (white) column rests nicely between the two side columns, however, if you change to IE and look at the very same page then the middle column drops below the left side column.

This is my first time at a css design and i cant work out why it is doing it, also the main logo is supposed to be centered, in IE it is left aligned.

If you are viewing the source, you will see a tag soup of tables in the middle of the nice CSS, this is due to the fact that we pick up a feed and it dumps the data into our page. This will change to be pure CSS but i am running out of time to get the site launched first.

One final question, i downloaded the Tidy HTML validator for firefox. I managed to get my pages passed the W3c online checker, but tidy claimed there was still errors. I went through and fixed all them to get a happy green tick but then when going back to W3C validation some things failed. I was under the impression that Tidy was developed by W3C, so why do they give varying results regarding validation?

Thank you for your time.

Hi all,

I'm trying to achieve the following:

<div id="left">This column is of blue background, and stretches all the way to the left.</div>

<div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div>

<div id="right">This column is of red background, and stretches all the way to the right.</div>

Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this?

I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code:
Code:

	#left {
		background-color: blue;
		float: left;
		margin: auto;
		position: absolute;
	}
	#center {
 		background: #DFDFEB url(../images/body/top.jpg) no-repeat;
		width: 760px;
		margin: 0 auto;		
	}
	#right {
		background-color: red;
	}

Thanks in advance!

Hey All,

Firstly, I apologise if this has already been answered. The search feature wasn't working for me, and to be frank, I didn't know what to search either!

Secondly, I'm developing a site with Joomla and am implementing my own design. I'm a bit of a CSS newbie, well un-experienced at least, and fail at being able to pick cross-browser bugs. Thus I have turned to the masters for help!

Ok - So this is what it should look like: BrowserShots in IE8

And this is what it shouldn't look like: BrowserShots in IE7

What it appears to be doing, to me, is pushing the logo div to the next line, as the pillmenu div is floated to the left. In the process of doing this, it stuffs up the margins and pushes the whole layout out.

On a second level, it appears to me that the background image is off centred, which COULD be BrowserShots being funny, but I'm not sure?

Live site is at: techmonkeys.com.au

I would love it if anybody could help me identify what bugs are occuring here. Or if it's just an error on my behalf, which it sure could be!

I also highly appreciate any advice, tips, or criticism you want to provide. But not about my menu! That's not done :P

Thanks in advance.

Cheers,
Chris

I'm working with a php script that i purchased. In my admin_login.php page is the entry for the image and my entry from my layout.css page. I'm only seeing half my background image. I cant seem to get it centered.

admin_login.php...

5.<div id="container_login">
6. <a href="http://www.myglobalpnr.com" target="_blank" id="login_logo"><img src="<?php echo IMG_PATH; ?>login_logo.jpg" alt="Property Listing Script by ClassifiedsGeek.com" /></a>
7. <div id="main_login">
8. <?php require $content_tpl; ?>
9. </div> <!-- main_login -->
10. </div> <!-- container_login -->
11.
12.layout.css...
13.
14./* login */
15.#container_login{
16. font-family: Arial, sans-serif;
17. font-size: 12px;
18. margin: 0 auto;
19. overflow: hidden;
20. position: relative;
21. max-width: 100%;
22. height: 1306px;
23.}
24.a#login_logo{
25. position: absolute;
26. top: 0;
27. left: 404px;
28. height: 129px;
29. margin: 0 auto;
30. width: 192px;
31.}
32.#container_login #main_login{
33. float: none;
34. margin: 200px auto 0;
35. position: relative;
36. text-align: left;
37. width: 343px;
38.}
39.#container_login h3{
40. font-size: 1.3em;
41. font-weight: bold;
42. margin: 5px 15px;
43. text-transform: uppercase;

I know there's one thing that i didn't do. Can you help me please?

Thanks in advance,
Scotty13

I have a problem with my background image. I need to centre the background image and center the container div on top of that. I have used the below CSS which has the desired effect in Mozilla but for some reason in ie, the background moves depending on browser size when it needs to stay put! Any ideas?

body {
font-size: 0.70em;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
background:#ffffff url('../images/content_bg.gif') top center no-repeat;
color: #303030;
height:100%;
min-height:100%;
}

#container {
width: 900px;
text-align:left;
position: absolute;
margin-left:-450px;
left:50%;
z-index: 100;
}

Hi there,

I have a right hand column with a background colour, but if the content area is longer than the column, the right column stops and the background colour does not go all the way down.

I have tried using a background images which works fine and goes all the way down in IE, but not in FF.

Any ideas how I can make it go all the way down?

Thanks!

I am trying to build this re-sizable box for an iPod Touch application.

mo-de . net/d/bg.jpg


#content_container_top {width:50%; height:13px; padding: 0px; position: relative;}
#content_container_top_left {width:13px; height:13px; padding: 0px; top: 0px; left: 0px; position: absolute; background-image: url(../images/content_container_a/tl.png); background-repeat: no-repeat;}
#content_container_top_repeat {width:100%; height:13px; padding: 0px; top: 0px; left: 13px; position: absolute; background-image: url(../images/content_container_a/ttrepeat.png); background-repeat: repeat-x;}

<div id="content_container_top"><!--Start top with three columns -->
<!-- Top columns 1 -->
<div id="content_container_top_left"> </div>
<!-- Top columns 2 -->
<div id="content_container_top_repeat"> </div>
<!-- Top columns 3 -->
<div id="content_container_top_right"> </div>
</div><!--End top with three columns →

This is a rough version of what I was thinking. In the old days I could do this easily with tables but I am trying to do this with divs.

My question is how can I create three columns the center has a tiled background that resizes. How do I make the center duplicate its self and not over ride the right side? I know how to make fixed size three column layouts but not sure how to make dynamic re-sizable three columns.

So I'm trying to setup a column on the right side of my content for advertisements.

I've gotten the two columns lined up next to each other, but the problem is that the background doesn't flow down to compensate for the length of the advertisement. It only seems to pay attention to the content in the content column on the left. Does anyone know how to get that background to extend down to compensate for the length of the advertisement, depending up on whether or not it's displayed?

If anyone's better with CSS than I am, and could help, I'm open to suggestions and fixes for how to accomplish this.

Test Page:
cvoproweb.com/testpage.html
Test CSS:
cvoproweb.com/teststyle.css

Thanks for the help, hopefully the problem isn't too complicated.
-Chris

Edit: This problem seems to be occurring in Firefox and Opera, (it works in IE7) does anyone know how to fix this in Firefox and Opera?

Hello,
I've made a layout using Photoshop and Dreamweaver. As you can see here.
Everything is fine for me except the Site Updates section. As you can see the sides of the site updates section aren't layers, instead they're images. When I tried making them as layers they didn't give me the outcome I wanted. Can somebody please tell me how to replace those images with layers so the section expands with more content.

Thanks

hey, i have 2 CSS problems.

number 1: my main <div> is not centered in IE. it's fine in FF, mozilla, and opera, but it stays all the way to the left in IE.

Code:

#main { width: 77%; margin: 0 auto; border: 1px solid #999; overflow: auto; background: #970303; color: #FFF; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; }

Code:

<div id='main' align='center'>

number 2: i can't figure out this gradient background stuff. i have an image, 1 px wide and 1000 px high. it works fine, but once theres enough information on a page, and its longer than the 1000px, the image starts over and looks extremely unprofessional. how can i make so that the one gradient image is stretched out for the length of the page?

thanks.

Hi

I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed...

html Code:
Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div>

  

    <div class="container"><table cellspacing="0">
      <colgroup>
        <col width="40" />
        <col width="220" />
        <col width="120" />
        <col width="65" />
        <col width="40" />
      </colgroup>
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
          <th>E</th>
          <th style="width: 100%;></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td style="width: 100%;></td>
        </tr>
      </tbody>
    </table></div>

css Code:
Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }

  

  


 div.container


 {


   height: 400px;


   width: 800px;


   overflow: scroll;


 }


 table


 {


   width: 100%;


 }


 td


 {


   border-style: solid;


   border-color: silver;


   border-width: 0px;


   padding: 1px 3px;


 }


 th


 {


   border-style: outset;


   border-color: silver;


   border-width: 2px;


   background: silver;


   padding: 1px 3px;


 } 

It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells...

Please help me

Hi all,

I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise.

This is an abridged version of the site's code for example:
Code:

<style type="text/css">
<!--
#main1 {
	padding: 0px;
	margin: 0px;
}

#left {
	width:260px;
	margin:0;
	padding:0;
	float: left;
}
#left-top {
	background-image: url(../images/panel-top-left.gif);
	background-repeat: no-repeat;
	background-position: center top;
	height: 16px;
	margin: 0px;
	padding: 0px;
}
#left-middle {
	background-image: url(../images/panel-middle-left.gif);
	background-repeat: repeat-y;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 2px;
}
#left-bottom {
	background-image: url(../images/panel-bottom-left.gif);
	background-position: center;
	height: 18px;
}
#logo {
	background-image: url(../images/swalingslogo.gif);
	background-position: center top;
	width: 260px;
	height: 120px;
	background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
	padding-left: 0;
	margin-bottom:10px;
	width: 217px;
}
#navlist li
{
	list-style: none;
	margin-bottom:4px;
	padding: 0;
	font-size:1.2em;
	line-height:1.8em;
	width:217px;
	height:32px;
	background-image:url(../images/nav2.gif);
	background-repeat:no-repeat;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
	display:block;
	text-decoration: none;
	color:#039;
	width:207px;
	height:32px;
	font-weight:bold;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}
#navlist li a:hover { 
	text-decoration: none;
	color:#FF6600;
}
/* Testimonials */
div#fscroller {
	width:200px;
	height:200px;
	background-image:url(../images/bg-testimonials.gif);
	background-repeat:no-repeat;
	margin-left:8px;
}
div#fscroller p {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}

/* Middle Column */
#middle {
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	text-align: justify;
	margin-left: 260px;
}
#middle #top-left {
	background-image: url(../images/panel-top-rightleft.gif);
	height: 16px;
	font-size: 2px;
	background-repeat: no-repeat;
}
#middle #top-right {
	float: right;
	margin-top: -16px;
	background-image: url(../images/panel-top-rightright.gif); 
	height: 16px; 
	width: 20px;
	font-size: 2px;
}
#middle a {
	color: #003399;
}
#middle a:hover {
	text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
	background-image: url(../images/title-unitedkingdom.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 201px;
	margin-bottom: 6px;
}
#middle h2#antigua {
	background-image: url(../images/title-antigua.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 128px;
	margin-top: 16px;
	margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
	float: left;
}
div.minisite span {
	display: none;
}
div.minisite a {
	background-position: top;
	background-repeat: no-repeat;
	height: 168px;
	width: 190px;
	display: block;
}
div.minisite a:hover {
	background-position: bottom;
}
a#minisite-swimminglessons {
	background-image: url(../images/swimming-lessons-uk.jpg);
}

.clear {
	clear:both;
}
.hidden {
	display: none;
}

.notopgap {
	margin-top: 0;
}

.nobottomgap {
	margin-bottom: 0;
}
.inside {
	background: #EFEFEF;
	padding-left: 10px;
	padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
		
<div id="left-top"></div>
<div id="left-middle">

<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->

<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
	
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
	
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
	
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>

<div class="clear"></div>

<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
			
<div class="clear"></div>
			
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
	
</div>	
<!-- End Middle Column -->
	
</div>

I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links.

This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this.

I can't add in links properly, so I hope this is acceptable under the rules --
The site in question is: www.swalings .com/swalings/index4.asp
and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg

Hopefully that's enough information to go on, please let me know if there's something I missed out.

Thanks a lot!

Rob

I am using the following code how do I change it so that it would show up in the center of the brower window?

Thanks
Tim
PHP Code:
<div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\">
<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" 

codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0

,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\">
<param name=\"allowScriptAccess\" value=\"sameDomain\" />
<param name=\"movie\" value=\"ads/cardio3.swf\" />
<param name=\"loop\" value=\"false\" />
<param name=\"quality\" value=\"high\" />
<param name=\"wmode\" value=\"transparent\" />
<param name=\"bgcolor\" value=\"#ffffff\" />
<embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" 

bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" 

allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" 

pluginspage=\"http://www.macromedia.com/go/getflashplayer\" />
</object>
</div>