Works mostly in Firefox, but won’t align in other browsers..

[nchipping]

It’s me again… I am still learning and will just need help for a little while…

Anyway, I don’t know what I’ve done wrong exactly, but the page won’t all align properly when it is in other browsers. The website is: http://www.meandmyback.com/provident-living

Here’s the HTML:

Code:

• 

• 

“You cannot improve that
which you do not track.”

Take control of your finances with
our easy-to-use tracking and
budgeting software and begin the
journey to financial freedom.

• Over 100 powerful calculators created by our team of highly-specialized mathematicians gives you ultimate ability to see “what if” situations.
• Solid, provident advice in all major aspects of your financial life, provided by experts.

You will inevitably make some
decisions on your own, but when
it comes to your financial future,
you want to know you’re getting
the best advice possible.

We are assembling the most
qualified and wide team of
professional advisors in one
place than ever before.

• 
• 
• 

The Success Spiral&#0153

What is it? Learn about this
powerful concept, and why
it is the foundation of our
provident philosophy, and
your financial success!

and now the CSS:

Code:

* {
margin:0;
padding:0;
}
body {
background-color: #364565;
}

#container {
margin: 0 auto;
padding-top: 70px;
width: 910px;
padding-bottom:inherit;
}
#header {
height: 100px;
width: 647px;
font-family:Arial, Helvetica, sans-serif;
font-size:large;
background-color:#FFF;
}
#header ul {
list-style:none;
display:block;
float:right;
width: 300px;
}
#header ul li {
list-style:none;
float: right;
display:block;
font-size:10px;
margin: -28px 190px 50px 0px;
width: 90px;
padding-left: 5px;
padding-right: 5px;
}
#headerimage {
margin:3px 25px 25px 25px;
}
#header-login {
float:right;
margin: 40px -150px 0px 20px;
}
#header-login ul li {
margin: 10px;
padding: 5px;
}
#main {
float: left;
width: 638px;
padding: 5px;
margin: -32px 0px 0px 0px;
background-color:#FFF;
}
#main1 {
float:left;
width: 190px;
padding:5px;
margin: 5px;
text-align:right;
}
#main2 {
float: left;
width: 190px;
padding: 5px;
margin: 5px;
border-left: solid 1px #364565;
border-right: solid 1px #364565;
text-align:center;
}
#main2 ul li{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
#main3 {
float:right;
width:190px;
padding: 5px;
margin: 5px;
text-align:left;
}

#main-right {
float: right;
width:249px;
height:410px;
margin: -145px 0px 0px 0px;
background-color: #FFF;
}
#main-right2 {
float:right;
width: 200px;
height:142px;
margin-left: 5px;
margin-top: 12px;
padding-bottom: 0px;
padding-right: 0px;
padding-top: 40px;
padding-left: 50px;
background-color: #E8A722;
font-family:Arial, Helvetica, sans-serif;
color: #364565;
}
#main-right2 p {
font-weight:600;
}
#align {
margin-top: 20px;
margin-left: 150px;
margin-bottom: 20px;
}
#align2 {
margin-left: 5px;
}
#main-right2 h5 b a {
text-decoration:none;
color: #364565;
border:none;
}
#main-right2 h5 b a:hover {
color: #999;
}
#main-right2 h5 b a:visited {
color: #364565;
text-decoration:none;
}
#main-right2 h5 {
padding-right: 30px;
}
#align3 {
display:block;
float:left;
list-style:none;
}
#align3 ul li {
list-style:none;
display:block;
float:left;
margin: 16px 26px 16px 26px;

}
#h1 {
font-family: Arial, Helvetica, sans-serif;
margin-left:310px;
margin-top:-140px;
margin-bottom:12px;
}
.clear {
clear:both;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
}
img {
border:none;
}

[TheDoc]

Start by validating:
linky

[nchipping]

Now it is validated, so here is the new HTML:

Code:

• 

• 

“You cannot improve that
which you do not track.”

Take control of your finances with
our easy-to-use tracking and
budgeting software and begin the
journey to financial freedom.

• Over 100 powerful calculators created by our team of highly-specialized mathematicians gives you ultimate ability to see “what if” situations.

  Solid, provident advice in all major aspects of your financial life, provided by experts.

You will inevitably make some
decisions on your own, but when
it comes to your financial future,
you want to know you’re getting
the best advice possible.

We are assembling the most
qualified and wide team of
professional advisors in one
place than ever before.

• 
• 
• 

The Success Spiral™

What is it? Learn about this
powerful concept, and why
it is the foundation of our
provident philosophy, and
your financial success!

What would you suggest now?

[cssfreak]

hey i will give an IE specific solution…..i am not sure whether this will work on other browsers

paste the following code inside the head of the markup ….. right after the

Code:

tag ends

Code:

Check it with other browsers and let me know if it works or not …….Enjoy

Edit : Forgot to mention this block of code works only for different versions of IE and these are just changes to the positions of the elements that weren’t aligned properly……..

and remove the css code for #align3 ………………..in style.css

[apostrophe]

#header and #main should be in one div together and floated left. Lose the padding on #container and give it a 70px top margin and ditch the negative margin on #main-right.

[nchipping]

CSSFREAK, your solution worked for IE only, but it is different in other browsers. I will just put one up specifically to check the browser, and if it is IE, then it will use that one – thanks!

APOSTROPHE, if I understood what you were saying correctly, you wanted me to either combine my #header and #main, or just put the same information on both, is either one of those right? I tried using the same information for both and doing the rest that you said, but everything became really messed up at that point – I’m sure I didn’t understand what you posted correctly. If you would like to clarify, I would be happy to try more solutions.

[apostrophe]

Structure the html something like this:

Code:

and the css:

Code:

#container {
margin:70px auto 0;
width:910px;
}

#leftMain {
float:left;
width:647px;
}

#main-right {
background-color:#FFFFFF;
float:right;
height:410px;
width:249px;
}

[cssfreak]

apostrophe with ur solution everything goes messy in IE …..

nchipping ma solution only works for Ie since i have given u a conditional statement that works only in Ie ……will let u know when i find a cross browser solution to this

[apostrophe]

"cssfreak" wrote:

apostrophe with ur solution everything goes messy in IE …..

Please elaborate.

[cssfreak]

the div "main" layout goes messy it doesnt show the background ……doesn’t display in the proper position …etc…. or am i missing something over here :lol:

[apostrophe]

Think you must be missing something. :roll:

I didn’t realise I was expected to re-code the whole page. All I did was correct the basic structure, I thought it was obvious that the contents would have to be adjusted to suit, my bad.

EDIT: Just went back for another look. Have you seen how the page is put together? Images in place of lists, images in place of links and images in place of headings, all thrown directly into the html, no image replacement here! Negative margins everywhere and line breaks used inplace of margins, it’s a testament to Firefox that the page works at all!

[cssfreak]

"apostrophe" wrote:

it’s a testament to Firefox that the page works at all!

Yes very true…….its a bad design case ….but we can only suggest a redesign and can’t spoon feed how do do effective design right…..well yes ur right kudos to firefox that it works and displays fine…..another reason to show the world that IE stone-age software :lol:

[Author]

Posts