Oh dear, perhaps some truly silly problems

**Mithos** · Mar 2, 2007 05:50

Hello, found this forum via the book by Ian Loyd, who couldn’t recommend this site any higher

. So thought I’d give it a go with a few problems I have...

I appreciate they are most likely so simple you might need to laugh at me for even asking them. But looking around other sites downloading their CSS and HTML files and trying to understand how they are doing it, I was unsuccessful.

So what I’m trying to do and the problems that are occurring...

1) First I’m not too keen to use tables in layout, (Discouraged from various articles and books I’ve read, are they really something to be dismissed

?) so want to position various graphs to make an L shaped bar/frame at the top of the page. Absolute positioning seems to be the type of choice and what I’ve been working with. Using dreamweaver/pure text editors, I’m able to position them in a place I want on one browser, but when I view it in another, they have shifted position. Not by much, but enough to see I am doing something wrong when it clearly doesn’t occur on other sites.

2.) When I resize my window on most pages the site seems to adapt to the new size without having to use the scrollbar to move left or right in order to see the whole page. My pages don’t. Basically I want to create a page that looks pretty much similar through all the different sized screens people have theses days.

3) (Convinced this is related to both issues above) Want a small “margin/padding” down the left and right side, pretty much like this site www.lycos.co.uk Can manage the left hand side with padding in PX, but unsure how to deal with the right. With different screen resolutions wouldn’t it look “gappy” rather than equal?

Sure there are other things I’ve missed but theses issues are stopping me from developing the site…

ANY help or advice would be Truly appreciated.

**droopsnoot** · Mar 2, 2007 06:25

Have a browse through the CSS forums. I'm in a similar position to you, sometimes, in that I have done some successful sites, and have lots more to learn.

All the things you've listed are issues that crop up on a daily basis in these forums, generally with more specific information (and code samples, and perhaps a link) you stand to get a better response from the CSS experts.

**Paul O'B** · Mar 2, 2007 07:16

Hi Mithos,

Welcome to the sitepoint forums.

I can't really answer your questions without looking at what you have got otherwise I would need to write a book to tell you how to do everything

The questions you are asking are basic design questions and will depend on the task in hand and therefore advice would be relevant to what you are actually doing at the time.

1) You say you have positional differences in various browsers and this is likely to be the default margin and padding that is applied to nearly all elements by default. This varies between browsers and you need to set the padding and margin explicitly on all elements you use otherwise they will be different in various browsers.

2) If you want a layout to scale with the browser window then you need so size everything in percentages and not fixed widths. Of course this does present other design problems and is not as straight forward as it sounds. Look at the 3 col layout demo thread to see how a flexible page can be constructed.

However if you have fixed elements like a graph then these obviously cannot be resized and therefore you may be better off with a fixed width.

3) That site you linked to is merely a fixed width site that is centred in the browsers window using margin:auto to center it. margin:auto applied to an element with a specified width will cause that element to be centred horizontally in the viewport. (See the faq on centering as there are other things to consider for older browsers.)

It would also be worth your while to take some time and read through all the css faq as you will run into many of the issues listed there sooner or later.

Off Topic:

droopsnoot - I bought one of first Firenza droopsnoot's when they were first made (must have been about 35 years ago). I believe mine was one of the first batch of 20 that was raced around thruxton as it came supplied with rollbars, fire extinguishers, engine cut off and full harness etc.

It was the worst car I ever owned in terms of reliability but it did look great at the time

. The gearbox was a nightmare to use and no-one could drive it but me and the exhaust fell off every time you went over a cats-eye because it was too low. The glass panels in the droopsnoot section would also fall out daily as well. The safety tyres also blew out.

However when it was working it was great and drove very well. Just though you might be interested seeing the link in your sig

**Mithos** · Mar 3, 2007 08:36

Originally Posted by Paul O'B

Hi Mithos,

Welcome to the sitepoint forums.

I can't really answer your questions without looking at what you have got otherwise I would need to write a book to tell you how to do everything

The questions you are asking are basic design questions and will depend on the task in hand and therefore advice would be relevant to what you are actually doing at the time.

1) You say you have positional differences in various browsers and this is likely to be the default margin and padding that is applied to nearly all elements by default. This varies between browsers and you need to set the padding and margin explicitly on all elements you use otherwise they will be different in various browsers.

2) If you want a layout to scale with the browser window then you need so size everything in percentages and not fixed widths. Of course this does present other design problems and is not as straight forward as it sounds. Look at the 3 col layout demo thread to see how a flexible page can be constructed.

However if you have fixed elements like a graph then these obviously cannot be resized and therefore you may be better off with a fixed width.

3) That site you linked to is merely a fixed width site that is centred in the browsers window using margin:auto to center it. margin:auto applied to an element with a specified width will cause that element to be centred horizontally in the viewport. (See the faq on centering as there are other things to consider for older browsers.)

It would also be worth your while to take some time and read through all the css faq as you will run into many of the issues listed there sooner or later.

Off Topic:

droopsnoot - I bought one of first Firenza droopsnoot's when they were first made (must have been about 35 years ago). I believe mine was one of the first batch of 20 that was raced around thruxton as it came supplied with rollbars, fire extinguishers, engine cut off and full harness etc.

It was the worst car I ever owned in terms of reliability but it did look great at the time

. The gearbox was a nightmare to use and no-one could drive it but me and the exhaust fell off every time you went over a cats-eye because it was too low. The glass panels in the droopsnoot section would also fall out daily as well. The safety tyres also blew out.

However when it was working it was great and drove very well. Just though you might be interested seeing the link in your sig

Ooh thank you very much for your help

. I've only been studying HTML/CSS for the last week so not 100% confident with the usage and meanings. Hope its OK to run these things by you;

(Not interested in points 2 or 3 at the moment, the thread “3 col”, you recommend seems to have “fixed” the problems I was having)

So point one, you told me “

you need to set the padding and margin explicitly on all elements you use otherwise they will be different in various browsers

”.

How would you do that? Is it not possible to just add this code at the start of the CSS?

Code:

* {
  margin: 0;
  padding: 0;
}

(I’ve done this, and although the pictures etc, across firefox and IE are still not completely in sync with one another, there has been a marked improvement.)

I’ve used one of your CSS and HTML codes from the example sites in that helpful thread to basically get the hang on what does what. Changed a few things, so posting the codes up in order for you to perhaps advise me. Confused about;

1) Why are images/text displayed differently on different browsers and how would I define the margin/padding on ALL elements.
2) Why can I adjust the left content and middle content columns in Firefox, but in IE the background image shows through instead.

CSS

Code:

/* mac hide\*/
html, body {height:100%}
/* end hide */
html,body {
	padding:0;
	margin:0;
}

* {
  margin: 0;
  padding: 0;
}

body {
    font-size: small;
}
* html body {
    font-size: x-small; /* for IE5 Win */
    font-size: small; /* for other IE versions */
}
html>body {
    font-size: small; /* be nice to opera */
}

h4 {

font-family: Tahoma, "comic Sans MS", sans-serif;
font-size: 11px;
text-align:center;
color: #828181;
margin: 0px;
padding-bottom:4px;
padding-top:3px;
font-weight:bold;
text-transform: uppercase;
border-bottom : 1px solid #828181;
background-color:#003366;
}


body{	
	text-align:center;
	min-width:760px;/* for mozilla*/
	background-color:#000000;
	background-image: url(bluegrad.gif);
    background-repeat:repeat-x;
	color:#000000;
}
#outer{
	height:99.9%;
	min-height:100%;
	width:760px;
	border-left:1px solid #000;
	border-right:1px solid #000;
	color: #000000;
	text-align:left;
	margin:auto;
	position:relative;
	background-color:#000000;
	background:url(colbk.gif);
	background-repeat:repeat-y;
	position:relative;
}

p {
   font-family:Tahoma, "comic Sans MS", sans-serif;
   padding: 0px;
   text-align:left;
   line-height: 115%;
   color:#333333;
   }
 
html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#header{
	position:absolute;
	top:3px;
	left:1px;
	width:760px;
	height:90px;
	background-image:url(Header1a.jpg);
	border:1px solid #000;
	overflow:hidden;
	color: #000000;
	z-index:100;
	background-color: #FFFFFF;
}
#left {
	position:relative;/*ie needs this to show float */
	width:120px;
	float:left;
	padding-top:72px;/*needed to make room for header*/
}
#left p {padding-left:3px;padding-right:2px}


#footer {
	width:760px;
	clear:both;
	height:70px;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	background-color: #FF8080;
	color: #000000;
	text-align:center;
	left:2px;
	bottom:2px;
	position: absolute;
}
* html #footer{margin-bottom:-1px}/* ie rounding bug*/
* html #footer {/*only ie gets this style*/
	\height:52px;/* for ie5 */
	he\ight:50px;/* for ie6 */
}
div,p  {margin-top:0}/*clear top margin for mozilla*/
#centrecontent {
	width:626px;
	float:right;
	padding-top:72px;/*make room for header*/
}
#centrecontent p {padding-left:3px}

#clearfooter {width:100%;height:52px;clear:both} /* to clear footer */
html >body #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper */

HTML

Code:

<!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>
<title>2 col layout with equalising columns and footer - content first</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="threec.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div id="minHeight"></div>
<div id="outer"> 
  <div id="centrecontent">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
      <p>&nbsp;</p>
    <p>This is all very well and good but what happens when we reach the end of the page and why the frell cant we style these pages! </p>
</p>
    <p>hjhjhj</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>fdfdfdfd fdfdfd</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>fdfd jjlfd dfdfd  </p>
  </div>
  <div id="left"> 
    <p align="left">&nbsp;</p>
    <p align="left"><img src="Sidebar12.jpg" width="122" height="469" /></p>
    <p align="left">gfgfgfgfgfgfgj hghghghg 
    <h4> stuff like this will go in here and maybe you could have some fun</h4> </p>
    <p align="left">&nbsp;</p>
    <p align="left"> the left content :this is the left content :this is the left content 
      :this is the left content :this is the left content :this is the left content 
      :d</p>
  </div>
  <div id="clearfooter"></div>
  <!-- ie needs this -->
  <div id="header"> 
    <p></p>
  </div>

  <div id="footer">Footer - | <img src="Button1.jpg" /> |- Footer </div>
</div>
  <!-- end outer div -->
</body>
</html>

**Paul O'B** · Mar 3, 2007 09:04

Hi,

Yes you can use * {margin:0;padding:0} to do a global reset but be aware that you will then need to supply a 16px left margin (or padding) on ul's in order for bullets to show.

There are also some issues with form elements when margins and padding are removed and elements like submit buttons will lose their depress effect when selected in mozilla browsers. This effect cannot be re-instated.

However apart from the above problems the global reset is a goo way for beginners to make sure they have zeroed everything.

1) Why are images/text displayed differently on different browsers and how would I define the margin/padding on ALL elements.

Images are displayed exactly the same on all browsers so I don't know what you mean. There are no issues with images as far as I am concerned apart form the gap that you will get when they are placed on the baseline unless you set them to display:block.

Text may vary in browsers depending on resolution,DPI settings, large or small font settings, monitor, or whether its a mac or PC etc and there is little that you can do about it.

For the most part I find that IE and firefox on the PC pretty much look the same and as long as layouts are fine in each browser then the odd pixel difference can be ignored.

2) Why can I adjust the left content and middle content columns in Firefox, but in IE the background image shows through instead.

You may need to provide a live link with images so i can see what you mean. The left and right columns can be changed as required but the equalising columns are catered by the repeating background image which must be made to match the column sizes exactly.

Here is the code tidied up a bit:

Code:

<!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>
<title>2 col layout with equalising columns and footer - content first</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="threec.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* mac hide\*/
html, body {height:100&#37;}
/* end hide */
* {
  margin: 0;
  padding: 0;
}

body {
    font-size: small;
}
* html body {
    font-size: x-small; /* for IE5 Win */
    f\ont-size: small; /* for other IE versions */
}

h4 {
font-family: Tahoma, "comic Sans MS", sans-serif;
font-size: 11px;
text-align:center;
color: #828181;
margin: 0px;
padding-bottom:4px;
padding-top:3px;
font-weight:bold;
text-transform: uppercase;
border-bottom : 1px solid #828181;
background-color:#003366;
}


body{    
    text-align:center;
    min-width:760px;/* for mozilla*/
    background-color:#000000;
    background-image: url(bluegrad.gif);
 background-repeat:repeat-x;
    color:#000000;
}
#outer{
    min-height:100%;
    width:760px;
    border-left:1px solid #000;
    border-right:1px solid #000;
    color: #000000;
    text-align:left;
    margin:auto;
    position:relative;
    background-color:#000000;
    background:url(colbk.gif);
    background-repeat:repeat-y;
    position:relative;
}
* html #outer{height:100%;} /*IE treats height as min-height anyway*/

p {
   font-family:Tahoma, "comic Sans MS", sans-serif;
   padding: 0px;
   text-align:left;
   line-height: 115%;
   color:#333333;
}
#header{
    height:90px;
    background-image:url(Header1a.jpg);
    border:1px solid #000;
    overflow:hidden;
    color: #000000;
    z-index:100;
    background-color: #FFFFFF;
}
#left {
    position:relative;/*ie needs this to show float */
    width:120px;
    float:left;
}
#left p {padding-left:3px;padding-right:2px}


#footer {
    width:760px;
    margin:-72px auto 0;
    clear:both;
    height:70px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color: #FF8080;
    color: #000000;
    text-align:center;
}
* html #footer {/*only ie gets this style*/
    height:72px;/* for ie5 */
    he\ight:70px;/* for ie6 */
}
div,p  {margin-top:0}/*clear top margin for mozilla*/
#centrecontent {
    width:626px;
    float:right;
}
#centrecontent p {padding-left:3px}

#clearfooter {width:100%;height:72px;clear:both} /* to clear footer */
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="centrecontent">
        <p>This is all very well and good but what happens when we reach the end of the page and why the frell cant we style these pages! </p>
        <p>hjhjhj</p>
        <p>fdfdfdfd fdfdfd</p>
        <p>fdfd jjlfd dfdfd </p>
    </div>
    <div id="left">
        <p><img src="Sidebar12.jpg" width="122" height="469" alt="" /></p>
        <p>gfgfgfgfgfgfgj hghghghg </p>
        <h4> stuff like this will go in here and maybe you could have some fun</h4>
        <p> the left content :this is the left content :this is the left content :this is the left content :this is the left content :this is the left content :d</p>
    </div>
    <div id="clearfooter"></div>
    <!-- ie needs this -->
</div>
<!-- end outer div -->
<div id="footer">Footer - | <img src="Button1.jpg" alt="" /> |- Footer </div>
</body>
</html>

**Mithos** · Mar 3, 2007 11:11

I cant provide a live link

(at the moment) but can perhaps do the next best thing.

Using the above code you posted. I've copied and pasted it into Dreamweaver HTML style sheet. Saved to a my computer location where all the image files are stored, then opened the file in both IE and Firefox. Then taken screenshots of both.

(for some reason the footer has moved from the bottom center in the new code, the screenshots cant show it, but there is more content below the footer "bar")

(mini pics are links to big ones)

IE

Firefox

**Paul O'B** · Mar 3, 2007 11:24

Hi,

mini pics are links to big ones)

No they are not - they go nowhere

Everyone seems to post these type of images (imgshack etc) but I can never view the larger image.

for some reason the footer has moved from the bottom center in the new code,

Then you have copied it incorrectly or changed the code in some way. the code I posted above is working perfectly in both those browsers and is working like it should.

It looks like you've either changed the footer code (e.g. missed out margin:auto) or you have moved the footer in the html or you have corrupted the code in some other way.

If you view source from your browser and post all the code you are using I will see if I can spot what you are doing wrong. A live version would be better as I could see exactly where you are going wrong.

**Paul O'B** · Mar 3, 2007 11:28

You will need to add position:relative to the footer to make it stack on top of the background on #outer.

Code:

#footer {
    width:760px;
    margin:-72px auto 0;
    clear:both;
    height:70px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color: #FF8080;
    color: #000000;
    text-align:center;
    position:relative;

**Mithos** · Mar 3, 2007 12:09

Originally Posted by Paul O'B

Hi,

No they are not - they go nowhere

Everyone seems to post these type of images (imgshack etc) but I can never view the larger image.

Wow thats really odd

Done all that and had a little play, everything looks good enough for the moment. So thank you loads!!

Perhaps this should be in the “3 col thread”, but…

http://img.photobucket.com/albums/v6...2/Firefox1.jpg

1) In the screenshot you can see a border, which is actually the background, on the left hand side of the image, is it possible to get the image to sit any closer to the left edge? Of would I need to hide the visible background with a "border - left" on the image? (If I use small negative numbers on the image position it sits flush on the right hand side of that column)

2) I read in the 3 col thread that this bit wasn’t possible without a designed background image, but haven’t read all 52 pages (so you might have found a solution) but where I’ve painted in those dots, is it possible to make the right hand side of the left column somehow have a visible border?

3) Firefox (by my own doing) at times overrides the default size and text style on webpages. This obviously isn’t helpful when I’m trying to see how things “fit” and “look”. Is there any code to force firefox to display what I tell it too? Or is this perhaps something I should ask about in another area of the site?

**Paul O'B** · Mar 4, 2007 05:37

Hi,

As you still don't have an online version I will just have to make some guesses.

1) make sure that the p tag that the image is sitting in doesn't have any padding. applied. If you are using the code above then the p tag has 3px left padding and if the image is inside that p tag then it will be 3px away from the side. Also the left column is 120px wide but you are squeezing in an image that is 122px wide.

You must be exact with your measurements and they must make sense or all bets are off

2)In the 100% height version the simplest way to get column colours and borders is to use a background image on #outer that provides all these in one go.:
e.g.
http://www.pmob.co.uk/temp/2colwaz.htm

I do have a version that can do this all without images but is very complicated and you will never be able to manage it at this stage as it uses a lot of advanced concepts.

http://www.pmob.co.uk/temp/3col/3col-abs4.htm

Therefore I would recommend using the background image method until you are more familiar with these techniques.

3)All browsers can over-ride the text settings on web pages and you must design so that your page can accommodated this. You have no way of knowing what size text the user may have selected or indeed what font they have selected.

In IE6 and under the text resize facility from the browser controls won't resize if you have specified pixels as the unit (which is why you should use relative sizes for accessibility reasons anyway) but the user is still able to go into the tools menu and specify not to use font sizes and forns used in web pages and to use their own preferences.

Therefore you should design with this in mind and realise that most of the things you do can be changed by the user because that is the nature of the web. The web is not a printed page but more a living page that can change and adapt to the users requirements.

Make sure that you design with this in mind and allow for the fluidity that most users require. This means that you have to take into account that things may expand and if you 100opx square box contains 100px text then it will break when the users resizes it. In most cases you try to let the content dictate the height of elements and in that way they will expand as the content changes in size.

This is not always easy and is the reason a lot of designers get it wrong but is something you should be thinking about from step 1.

Hope that helps

**Mithos** · Mar 5, 2007 06:27

Originally Posted by Paul O'B

Hope that helps

It has. LOTS!

Wish I could hug you, you've helped a girl in need no end!

As soon as I made sure my measurements were "logical" the whole thing came together nicely, and displays exactly the same in both IE and FF. I guess because I was demanding something "unlogical" FF and IE decided to do something different in order to try and make sense of what i was saying.

Using your 2 col example again. I tried to add some navigation in, on the larger colum at the top, just under the header in a horizontal fashion. First off I used Dreamweaver Flash buttons, oh boy what a mistake! Worked in FF but in IE, gosh all kinds of errors. Think Flash is a bit of a complex thing, so decided to go for normal "buttons" created in paint shop pro. Anyway it all looked good on my screen, but when I tested it on another computer which had a larger screen the "line" i had created was out of place. I'm fairly sure this is to do with postioning, and was wondering how would I force it to stay in the same place. Would it be "relative" because it would be depend on the screen display?

Also kind of unrelated but I notice you quite often put the CSS stuff in the same "page" as the HTML rather than linking to it? Is one better than the other or just your personal preference?

**Paul O'B** · Mar 5, 2007 08:33

Also kind of unrelated but I notice you quite often put the CSS stuff in the same "page" as the HTML rather than linking to it? Is one better than the other or just your personal preference?

No, its just for demo purposes to make it easier for visitors to view. All css files should be external in normal pages.

Anyway it all looked good on my screen, but when I tested it on another computer which had a larger screen the "line" i had created was out of place. I'm fairly sure this is to do with postioning, and was wondering how would I force it to stay in the same place. Would it be "relative" because it would be depend on the screen display?

I'd really need to see the code you are using as it could be a number of things.

If you are placing things in the logical flow then usually they don't need to be positioned at all. If you are placing something absolutely in relation to a parent element then the parent element needs to be position:relative.

However most times elements would probably need to be static or floated unless there is a special reason (such as placing a header banner absolutely at the top of the page but having the code at the end of the html - usually done for seo reasons).

User Tag List

Thread: Oh dear, perhaps some truly silly problems

Thread Tools

Display

Oh dear, perhaps some truly silly problems

Bookmarks

Bookmarks

Posting Permissions