Hey Coding Maestros,

 

I think what I need done is a JavaScript job, except I haven't learnt it yet, I can understand the logical structure of it when I read the code, so I can alter code slightly but it would be virtually impossible to start from scratch.

 

Can anyone help me write a coding sequence that can check which browser the user is using, then perhaps in an "if... then... else..." type loop, IF the user is using IE (internet explorer) THEN read from CSS file behind door number 1 ELSE IF Firefox read CSS file behind door number 2?

 

I can sit here and try make the coding compatible to both browsers but I've already spent a month tweaking and tweaking and tweaking till now I'm just about ready to learn JavaScript from beginning to end to counteract browser differences... but I'm stubbornly resisting... I'd rather write two different CSS files and have them be called up by the coding sequence in the html file.

 

I know with IE the user can say no to reading the JavaScript, so I guess by default I should force the code to read from the first CSS file which is IE compatible and then only if it's not IE read from the firefox friendly CSS file...

 

Does this make sense?

 

Cari.

Hey Cari,

 

That makes perfect sense, but I don't think you should do it, though. Javascript can be turned off, but it's also bad practice to split your styling into separate style sheets for each browser. You are just duplicating all the code, and when you come to tweak or add something, you will need to do it on each different style sheet, and you will soon make mistakes or forget something.

 

I think it would be much easier, and better for your visitors if you let us help you get your website compatible with all the browsers. I'm sure there will be plenty of people ready to look through and guide you in what to do.

 

Rob

Hey Cari,

 

That makes perfect sense, but I don't think you should do it, though. Javascript can be turned off, but it's also bad practice to split your styling into separate style sheets for each browser. You are just duplicating all the code, and when you come to tweak or add something, you will need to do it on each different style sheet, and you will soon make mistakes or forget something.

 

I think it would be much easier, and better for your visitors if you let us help you get your website compatible with all the browsers. I'm sure there will be plenty of people ready to look through and guide you in what to do.

 

Rob

 

Good point

 

Hmmm...

 

Ok, i'll put up a link to what I've done in a few minutes, the coding is such a mess right now, I'm throwing wrappers in trying to control the positioning a bit more.

 

This is my first "professional" website, so any comments on any beginners mistakes I might be making would be great.

 

Hopefully I can give you an idea of what I'm aiming for though.

 

Thanks for the advice,

 

Cari.

No worries, I'll be more than happy to have a look through and give you any tips and advice I can think of.

 

Let us know when it's up to look at.

You can always use this code to target browsers for CSS:

 

<!--[if IE 6]>

Special instructions for IE 6 here

<![endif]-->

 

etc

Bare in mind that is just for Internet Explorer. That method should only be used for "hacks" and styling that fixes bugs in IE (6). For example, PNG hacks, floating bugs. Etc

Hi!

 

Sorry this took so long. Uploading the files on to the server has been pretty time consuming.

 

So this is the link:

 

www.xtendsd.co.za/demo2/index.html

 

It's made up of three frames. My boss was adamant that he wanted it that way. The layout looks perfect on IE on my computer but on firefox it's slightly off. It's bugging me. I'm really aiming for it to be compliant to both browsers.

 

This is the CSS file of the main page:

 

/* CSS Document */

body {
background-color:#2D3423;
font-family: Georgia, "Times New Roman", Times, serif;
}

#screen {
position:absolute;
width:100%;
height:auto;
top:0px;
left:-2px;
z-index: 50;	
}

#header {
position:relative;
height:178px;
width:1024px;
background-color:#000000;
margin:0px auto;
z-index: 100;
top: -12px;
}

#banner{
position:fixed;
height:148px;
width:1024px;
margin:0px auto;
z-index: 100;
} 

#navigation {
position:fixed;
height:30px;
width:1024px;
margin:0px auto;
background-image: url(menu2new.gif);
letter-spacing: 2px;
word-spacing: 5px;
z-index: 100;
top: 135px;
}

#navigation ul {
position:relative;
list-style:none;
margin:0px;
padding-left:100px;
}

#navigation ul li {
display:block;
float:left;
padding-left:10px;
}

#navigation ul li a {
display:block;
float:left;
height:25px;
background-image: url(menu2new.gif);
text-decoration:none;
color:#C7C8C6;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
background-repeat: no-repeat;
background-position: right;
font-weight: bold;
}

#navigation ul li a:hover {
display:block;
float:left;
height:25px;
background-image: url(menu1newb.gif);
text-decoration:none;
padding-top: 5px;
padding-right: 20px;
padding-left: 20px;
background-repeat: repeat-x;
background-position: right;
}

#navigation ul li a.current {

}

#body {
position:absolute;
top:0px;
width:100%;
height:auto;
}

#body_area {
position:relative;
width:1024px;
height:auto;
margin: 0px auto;
top: 0px;
}

#body_areacolor {
position:relative;
width:1024px;
height:auto;
top: 0px;
background-color: #1A1A1A;
margin-left: 18px;
}

#wrapper {
position: relative;
margin: 0px auto;
width: 680px;
height: auto;
padding-top: 0px;
}

#positionhomepage {
position:relative;
top:-420px;
}

#lefttextbox {
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #000000;
position: relative;
height: 400px;
width: 240px;
top: 498px;
left: 764px;
background-image: url(topmod_bg4.gif);S
}
#lefttextbox p {
padding: 20px;
}
#lefttextbox p.title {
font-size: 24px;
color: #0F793D;
display: box;
background-color: #FFFFFF;
}

#text {
position:relative;
width:autopx;
height:auto;
padding: 10px;
color: #1D753A;
font-family: Georgia, "Times New Roman", Times, serif;
top: 5px;
padding-bottom: 50px;
border: thick none #000000;
font-size: 14px;
}

#textbox {
position:relative;
background-color:#1A1A1A;
height:auto;
width:680px;
margin-top: 20px;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 50px;
background-image: url(topmod_bg2.gif);
font-size: 14px;
}

#footer {
position:fixed;
width:100%;
height:auto;
bottom: 0px;
left: 0px;
z-index:100;
}

#footernavigation {
position:relative;
height:30px;
width:1024px;
margin:0px auto;
background-color:#000000;
bottom: 0px;
z-index: 100;
background-image: url(menu2new.gif);
}

#footernavigation ul {
position:relative;
list-style:none;
margin:0px;
padding-left:200px;
}

#footernavigation ul li {
display:block;
float:left;
padding-left:10px;
}

#footernavigation ul li a {
display:block;
float:left;
height:25px;
background-image: url(menu2new.gif);
text-decoration:none;
color:#C7C8C6;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
background-repeat: no-repeat;
background-position: right;
font-weight: bold;
}

#footernavigation ul li a:hover {
display:block;
float:left;
height:25px;
background-image: url(menu1newb.gif);
text-decoration:none;
padding-top: 5px;
padding-right: 20px;
padding-left: 20px;
background-repeat: repeat-x;
background-position: right;
}

img.place {
margin:-10px;
margin-top:-20px;
}

.title {
color:#FFFFFF;
font-size: 24px;
letter-spacing: 2px;
}

.text {
color:#000000;
font-size:16px;
padding-left: 50px;
padding-right: 100px;
width:500px;
}



.style1 {color: #0F793D}
.link {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
}
#lefttextbox p.subtitle {

font-size: 18px;
color: #FFFFFF;
}
#lefttextbox p.subtitle a {
font-size: 18px;
color: #FFFFFF;
text-decoration: none;
}
#lefttextbox p.subtitle a:hover {

font-size: 18px;
color: #0F793D;
text-decoration: none;
}

 

The main page has a left column with links to external websites relating to the topics on the main page, then on every other page I take out the left column and the text area is centred.

 

I have about a page and a half of changes to make to it all, like correcting certain text differences and div size alterations, but the main issues I have is getting the middle frame div's to be in the same places in both firefox and IE.

 

 

I didn't design the banner, a freelance graphic designer did that for me. It looks really cool though. Hope I can design graphics like that one day. My next goal in life.

 

Should a post any more codes? Like the html to the first page and then one of the other pages? Just let me know.

 

Thanks for helping!

 

Cari.

Ouch I don't envy you having to use frames - eeek!

 

I presume you mean the differences are where the text falls? What might help is the universal reset which reset all padding and margins to zero. Add this to your main css file

 

* {padding: 0; margin: 0;}

 

You'll now have to reset all padding and margins to containers and elements but it will give you more control with your layout across browsers. In fact you might even get away without having to use an IE only hack sheet as well.

Ouch I don't envy you having to use frames - eeek!

 

I presume you mean the differences are where the text falls? What might help is the universal reset which reset all padding and margins to zero. Add this to your main css file

 

* {padding: 0; margin: 0;}

 

You'll now have to reset all padding and margins to containers and elements but it will give you more control with your layout across browsers. In fact you might even get away without having to use an IE only hack sheet as well.

 

Awesome, thanks blue dreamer! I'll definitely give that a try. Hopefully it works

Just a side note, it is possible to achieve the frames look using just css

 

Here's a good example: http://limpid.nl/lab/css/fixed/header-and-footer

 

Using the overflow property you should be able to hide the main scroll bar and add a scrollbar just to the content div instead as well I think.

 

Just some food for thought.

No.... it didn't work...

Just a side note, it is possible to achieve the frames look using just css

 

Here's a good example: http://limpid.nl/lab/css/fixed/header-and-footer

 

Using the overflow property you should be able to hide the main scroll bar and add a scrollbar just to the content div instead as well I think.

 

Just some food for thought.

 

Ok, I'll give it a try... any tips on how to get the alignments the same in firefox and in IE? What happens is that the middle frame area is about 15px to the side on firefox where on IE it's perfect...

 

This is the link of what I've done so far... I'm not too excited over this site any more. I've spent so much time on it that I dread working on it now.

 

http://www.xtendsd.co.za/demo2/index.html

Hey terrorsreign.

 

It seems to be that your code could be tidied up a little bit, this can often solve niggles like this.

 

You main page div for example has 7 divs opened in a row like this:

 

<div id="screen">
 <div id="body">
<div id="body_area">
  <div id="body_areacolor">	
	<div id="positionhomepage">
	  <div id="text">
		<div id="lefttextbox">

 

Try to reduce this to as few as possible.

 

Also try to use margins/padding instead of things like this:

 

<p class="subtitle"><br />
	<br />
	</p>

 

I find that this too can cause niggles.

Aaah, okies, indeed indeed... maybe I'll just start from scratch... hmmm... yup... I'll give that a go.

 

Thanks Eris!

 

Any comments on the design? It's my first website... I built some for fun back in high school but only in HTML. So any comments on how I've structured the site would be appreciated, as I'll be able to keep them in mind for the next website. (I'm meant to build three... oi ve...)

 

Cari.

I think it would look much better if the header, content and footer were all one continuous block. The header and footer can stay in the same place, just without the gaps between.

 

To get a two column layout on the content section you should just need something like:

 

<div id="wrapper">
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</div>

Header is the welcome banner, the footer is just to force the layout to render correctly

 

the css needs to fix the width of the wrapper, the left and right divs. And then float both the left and right div.

 

body {
text-align: center;
} 
wrapper {
text-align: left;
margin: 0px auto;
width: #### whatever;
}
left {
float: left;
width: ### whatever;
}
right {
float: left;
width: ### whatever;
}
footer {
clear: all;
}

 

If the left and right divs don't align side by side, it is just because their widths with the margins and paddings add up to more than the wrapper div.

I think it would look much better if the header, content and footer were all one continuous block. The header and footer can stay in the same place, just without the gaps between.

 

Uhmmmm... one continuous block? Please expand a bit. My interpretation of that is a bit fuzzled...

 

I've tried to aim for a structure that is continuous... when you first open the page the header, main page and footer should look like one page and it should not seem like three different pages... not sure if I have achieved that.

 

The right "Reated links" div is only for the main page. On the other pages I've been asked to just center the divs. So all the many different divs are so that I can control placements on different pages...

 

Thanks for the other link to the css frames layout. I've just recoded it a bit to look like the structure I've used on the xtendSD website and the outcome is exactly the same. So I'm definitely going to use the CSS version rather.

 

And thanks for the help in general, I appreciate it.

 

Cari.

You're very welcome.

 

I meant exactly what you said, that the 3 parts of the page should look like they are all the same page, rather than being seperated so like this:

 ---------------
|			 |
|			 |
|			 |
|			 |
---------------

not this:

 ---------------
|			 |
---------------
---------------
|			 |
|			 |
---------------
---------------
|			 |
---------------

 

Go ASCII art lol.

Lol!

 

Ok, I see... Thanks, I'll give it a shot. Currently cursing at IE again, it's refusing to center elements in the CSS frames idea... it never ends...

Ok, to get IE to center you need the following structure

 

<element1><element2></element2></element1>

 

element 1 needs

 

text-align: center;

and margin: 0px auto; for good measure

 

element 2 needs

margin: 0px auto;

(and text-align: left to get the stuff left aligned inside)

 

element 1 is usually the <body>

element 2 is usually a container/wrapper <div>

 

Most browsers center automatically when you just set the margins of the elements you want centered to 0px auto

IE requires whatever the element-to-be-centered is contained in to have text-align: center. It is a royal pain in the arse!

 

Does this help?

I don't know if you have an extra second on your hand, this is the exact code, I gave the banner div a random colour in case you look at the code through a browser.

 

<!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>Fixed header and footer</title>
<style type="text/css">
body{
 margin:0;
 padding:178px 0 30px 0;
}

#header{
 position:absolute;
 left:0px;
 top:0px;
 width:100%;
 height:178px;
 background-color:#000000;
}

#position {
 position:relative;
 margin:0px auto;
 width:1024px;
 text-align: center;
}

#banner {
height:148px;
z-index: 100;
background-color:#0066CC;
}

#navigation {
height:30px;
background-image: url(../My%20Pictures/Practice/menu2new.gif);
letter-spacing: 2px;
word-spacing: 5px;
z-index: 100;
}

#navigation ul {
position:relative;
list-style:none;
margin:0px;
padding-left:100px;
}

#navigation ul li {
display:block;
float:left;
padding-left:10px;
}

#navigation ul li a {
display:block;
float:left;
height:25px;
background-image: url(../My%20Pictures/Practice/menu2new.gif);
text-decoration:none;
color:#C7C8C6;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
font-weight: bold;
}

#navigation ul li a:hover {
background-image: url(../My%20Pictures/Practice/menu1newb.gif);
background-repeat: repeat-x;
background-position: right;
padding-top: 5px;
padding-right: 20px;
padding-left: 20px;
}

div#footer{
 position:absolute;
 bottom:0;
 left:0;
 width:100%;
 height:30px;
 background-color:#000000;
}

@media screen{
 body>div#header{
  position:fixed;
 }
 body>div#footer{
  position:fixed;
 }
}
* html body{
 overflow:hidden;
} 
* html div#content{
 height:100%;
 overflow:auto;
}
</style>
</head>

<body>

<div id="header"> 
<div id="position">
 <div id="banner">
<div align="center"></div>
 </div>

<div id="navigation">

<ul>
  <li>
	<a href="home.html" target="two">Home</a>	  </li>

  <li>
	<a href="companyexpertise.html" target="two">Company Expertise</a>	  </li>

  <li>
	<a href="softwaresolutions.html" target="two">Software Solutions</a>	  </li>

  <li>
	<a href="services.html" target="two">Services </a>	  </li>

  <li>
	<a href="contactus.html" target="two">Contact Us</a>	  </li>
</ul>
 </div>
</div>
</div>

<div id="footer"> footer </div>
<div id="content"> content </div>

</body>
</html>

 

I'm getting neurotic and thinking IE doesn't like me very much...

I'm a bit confused, why is your content div outside of your position div?

 

Also, you have width: 100% rather than a fixed width so it can't center as it takes up the whole page?

 

Ermm.. wait a sec lol I looked at that a bit wrong. But 1024 is bit large for a width.

Here's some code that has fixed header, fixed footer, centered content and left and right columns

 

See if this helps:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Fixed header and footer</title>
<style type="text/css">
body{
 margin:0;
 padding:100px 0 50px 0;
}
div#header{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100px;
 text-align: center;
 margin: 0px; auto;
}
div#footer{
 position:absolute;
 bottom:0;
 left:0;
 width:100%;
 height:50px;
 text-align: center;
 margin: 0px; auto;
}
@media screen{
 body>div#header{
  position:fixed;
 }
 body>div#footer{
  position:fixed;
 }
}
* html body{
 overflow:hidden;
} 
* html div#content{
 height:100%;
 overflow:auto;
}
#contentwrapper{
	text-align: center;
width: 100%;
}
#content{
	text-align: left;
margin: 0px auto;
width: 780px;
background: black;
color: white;
padding: 0px;
}
#left {
	width: 520px;
float: left;
}
#right {
	width: 260px;
float: left;
}
ul {
list-style:none;
margin:0px;
background-image: url(../My%20Pictures/Practice/menu2new.gif);
}

ul li {
display:inline;
padding-left:10px;
}

ul li a {
height:25px;
background-image: url(../My%20Pictures/Practice/menu2new.gif);
text-decoration:none;
color:#C7C8C6;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
font-weight: bold;
}

ul li a:hover {
background-image: url(../My%20Pictures/Practice/menu1newb.gif);
background-repeat: repeat-x;
background-position: right;
padding-top: 5px;
padding-right: 20px;
padding-left: 20px;
}

</style>
</head>
<body>
<div id="header">
header content
<ul>
<li><a href="home.html" target="two">Home</a></li>
<li><a href="companyexpertise.html" target="two">Company Expertise</a></li>
<li><a href="softwaresolutions.html" target="two">Software Solutions</a></li>
<li><a href="services.html" target="two">Services </a></li>
<li><a href="contactus.html" target="two">Contact Us</a></li>
</ul>
</div>
<div id="footer">
<p>Content can be placed here…

</div>
<div id="contentwrapper">
	<div id="content">
	<div id="left">

Welcome to xtendSD's website.

xtendSD can extend your company's capabilities in any way it needs to in order for your company to grow and flourish. With a team of highly qualified experts in the field of software development xtendSD strives to help your company maximize its productivity and minimise expense. xtendSD helps you save time and effort with a sophisticated software solution that is designed specifically for your company's requirements.

xtendSD offers you

* Highly qualified staff

* Sophisticated software solutions for your company's specific needs

* Our services vary and you may enquire at any stage on what xtendSD can offer your company

* If at any time you want to contact xtendSD please do not hesitate to do so
</div>
<div id="right">
	Related Links

What Wikipedia Has to Say About SAP Business One...

SAP Business One Solutions For Small Businesses... 
</div>

</div>
</div>
</body>
</html>

I've edited the above to include your navigation. Hope your getting somewhere with this

My... head... is numb... *passes out on desk*

 

I think I'm going to go outside and hug a tree or something to just clear my head. Is it possible to get coding brain freeze?

 

Thanks for all your help. I'm starting to realise my main issue is that I throw in too much code to try correct the current code so I end up shooting myself in the foot in the long run.

 

I've had a squiz through the code you just posted and it works. Thanks. I'll adapt my code towards what you've written.

 

Shall let you know how I've progressed once I've cleared my head a bit...

 

Cari.

I found when I was learning I used to make the same mistake of adding more and more code to fix an issue, instead of working out why something didn't work — which usually ended up only needing to change one line of code.

 

Don't worry about it, you need to do things like this to progress further with your learning. If you never made a mistake, you'd never know what not to do in the future.

 

At the end of the day, if you think something is turning out too complicated to fix, it usually means there is an easier way.

 

I might join you with that tree!

Yeah it's just that you have lines of code which fixes problems caused by other lines of code.

 

For example to get navigation lists to line up horizontally, you just need to set

ul li {
display:inline;
}

 

But you had several float: lefts and display: blocks.

 

I used to have EXACTLY the same problem.

 

*Joins tree hugging* Anyone wanna write this essay for me?

*Joins tree hugging* Anyone wanna write this essay for me?

 

I might consider it if you make my portfolio area.

*sigh* have either of you managed to complete your tasks?

 

Cause I haven't!

 

I've caved in! I'm using the IE hack, I couldn't take it anymore... but I've used the float:left; suggestion... except I've used float:right; it kind of creates a fluant flow for the page...

Have you got a linky? I don't understand what IE hack you needed?

 

I haven't finished my essay no, made some reasonable progress though!