Links bar moving - Dev Shed

Dev Shed Forums Sponsor:

June 16th, 2004, 10:46 AM

adiwood

Contributing User

Join Date: Jan 2004

Location: bournemouth

Posts: 165

Time spent in forums: < 1 sec
Reputation Power: 5

Links bar moving

Hi Whenever I shrink my window in Ie, the Links bar stays in the same place. You can view this at

http://www.trowbridge-wiltshire.co.uk/newtrowbridge

Code:

	body 		{

			
			background:#CBDEF5;
			margin: 1em auto;
			width: 600px;
			
			
			}

	#leftcontent	{
			margin: 1em auto;
			position: absolute;
			top:100px;
			left:250px;
			width:100px;
			background:#CBDEF5;
			
			}

	#centercontent 	{
			margin: 1em auto;
			width:500px;
			background:#87B4EB;
			color:#ffffff;
			border:2px solid rgb(75,123,211);
   			margin-left: 140px;
   			margin-right:20px;
			}
	
	
	#advertising {
			margin: 1em auto;
			width:500px;
			background:#87B4EB;
			color:#ffffff;
			border:2px solid rgb(75,123,211);
			margin-left:140px;
			margin-right:20px;
		}
		
	#banner 	{
			background:#CBDEF5;
			height:40px;
			padding:5px;
			}
	

	p,h1,pre 	{
			margin:0px 10px 0px 10px;
			}

	h1 		{
			font-size:14px;
			padding-top:10px;
			}

	
	background: #c3c8c3; }
	
	#button ul {
			list-style: none;
			margin: 0;
			padding:0;
			border:;
			}
	
		#button li {
			border-bottom: 1px solid #CBDEF5;
			margin: 0;
			}
	
	
	#button li a {
			display: block;
			padding: 5px 5px 5px 0.5em;
			border: 1px solid #1958b7;
			background-color: #87B4EB;
			color: #fff;
			text-align:center;
			text-decoration: none;
			width: 100%;
			}
	
		html>body #button li a {
			width: auto;
			}
	
		#button li a:hover {
			border: 1px solid #1958b7;
			background-color: #4B7BD3;
			color: #fff;
		}

June 16th, 2004, 10:55 AM

ChiefWigs1982

Cunning Linguist

Dev Shed God 10th Plane (9500 - 9999 posts)

Join Date: Jul 2003

Location: I used to live at home, now I stay at the house

Posts: 9,920

Folding Points: 50746 Folding Title: Beginner Folder

Time spent in forums: 3 Months 2 Weeks 6 Days 7 h 15 m 40 sec
Reputation Power: 873

Of course it will, you have it poitioned absolutely off the top left of the screen, so it will always stay 100 by 250 from the top left. if you want it fluid, use percentages instead.

<edit>...Plus you've also knackered the code somehow, cos the menu is wrong in FireFox...

__________________

Support requests via PM will be ignored!
Sites: Route of Queue | Sinthetic - Alternative UK Hiphop
Read These: The General Rules Thread | The General FAQ Thread | NEW USERS - How to post a question

Sign up with Matched.co.uk and earn up to £15 per website every month!

June 16th, 2004, 10:56 AM

adiwood

Contributing User

Join Date: Jan 2004

Location: bournemouth

Posts: 165

Time spent in forums: < 1 sec
Reputation Power: 5

Oh yeah! duh, im so stupid!

June 16th, 2004, 11:17 AM

adiwood

Contributing User

Join Date: Jan 2004

Location: bournemouth

Posts: 165

Time spent in forums: < 1 sec
Reputation Power: 5

God css is so confusing. Im starting not to like it. As someone discussed here the other day, is it really worth it. I mean yes, it may make data easier to update and stuff, but is the extra work worth it?

I dont have a clue what is wrong with my menu bar in Firefox. Here is th code, and the css can be seen above.

PHP Code:


		
			
<div id="button">

<ul>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/index.php">Home</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/history.php">History</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/future.php">Future</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/stories.php">Your Stories</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/leisure.php">Leisure</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/pub.php">Pub</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/clubbing.php">Clubbing</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/eating.php">Eating</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/takeaways.php">Takeaways</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/hotels.php">Hotels</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/shops.php">Shops</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/business.php">Business</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/photos.php">Photos</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/map.php">Map</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/links.php">Links</a></li>

    <li><a href="http://www.trowbridge-wiltshire.co.uk/contactus.php">ContactUs</a></li>

    <li><?php

        include "copyright.txt";

        ?>

    </li>

</ul>

</div>

Also I cant get the roblem I wrote about above sorted. IT just wont line up properly.

June 16th, 2004, 11:24 AM

adiwood

Contributing User

Join Date: Jan 2004

Location: bournemouth

Posts: 165

Time spent in forums: < 1 sec
Reputation Power: 5

I have got the side panel sorted, an now it can be viewed in 800x600 ut what about the side panel in firefox?

Last edited by adiwood : June 16th, 2004 at 11:32 AM.

June 16th, 2004, 12:33 PM

1beb

This tagline is not long enoug

Join Date: Aug 2003

Location: Toronto, ON Canada! I AM CANADIAN

Posts: 861

Time spent in forums: 2 h 32 m 12 sec
Reputation Power: 10

This is what it looks like in FireFox

Attached Images

screenshot.jpg (199.4 KB, 273 views)

__________________
The Standards!
CSS 2 - CSS 3 - w3c CSS Validator - XHTML 1.1 - HTML 4.01 - w3c (X)HTML Validator - ActionScript Reference

Links!
Bert's Door and Lock Service | Brandon Erik Bertelsen | TextPattern

June 16th, 2004, 01:11 PM

adiwood

Contributing User

Join Date: Jan 2004

Location: bournemouth

Posts: 165

Time spent in forums: < 1 sec
Reputation Power: 5

I know that, i dont iknow what is wrong though!!!

June 16th, 2004, 01:32 PM

1beb

This tagline is not long enoug

Join Date: Aug 2003

Location: Toronto, ON Canada! I AM CANADIAN

Posts: 861

Time spent in forums: 2 h 32 m 12 sec
Reputation Power: 10

oopsie, looks like your link died?

June 16th, 2004, 01:53 PM

adiwood

Contributing User

Join Date: Jan 2004

Location: bournemouth

Posts: 165

Time spent in forums: < 1 sec
Reputation Power: 5

All changed! Was in the middle of sorting my server!

#10

June 16th, 2004, 02:23 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,674

Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687

OK. I played with this some. I don't recall all the changes made. This is basically just cleaned up up and redundancies removed. note that #leftcontent has two variations, float and absolute. Commment one or the other. The #centercontent was changed from absolute to static positioning. I later changed it to relative to work around indeterminate IE bugs.

The html remains the same either way.

I wrapped the whole thing in a container div. Moz didn't need it, but IE is twitchy without it.

You may need to play with top, left, margin, etc., but don't expect pixel perfection from one OS or browser to the other.

cheers,

gary

Attached Files

	add.css.txt (1.4 KB, 243 views)
	trow.html.txt (2.8 KB, 133 views)

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

#11

June 16th, 2004, 02:37 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,674

Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687

Just saw your revision since you got the site back up. It still looks like s——t in Moz/Firefox. You really should use Moz or Firefox as your main testbed. It is the most standards compliant browser available. IE is among the worst. As you get things working in Moz, you can apply the hacks IE needs to appear to work right. Going the other way will make you crazy.

cheers,

gary