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
<ul> <li><img alt=\"Home Features FAQs About Us\" src=\"images/home-features-faqs-aboutus.gif\" usemap=\"#nav\" /></li> </ul> </div> <div id=\"main\"> <img id=\"align\" src=\"images/round-arrows.gif\" /> <img alt=\"3 Steps to Your Success...\" style=\"margin:0px 0px 30px 10px;\" src=\"images/3steps.gif\" /> <br /> <div id=\"main1\"> <img alt=\"1. Track\" src=\"images/track.gif\" /><br /><br /> <p>\"You cannot improve that<br /> which you do not track.\"</p><br /> <p>Take control of your finances with our easy-to-use tracking and budgeting software and begin the journey to financial freedom.</p> </div> <div id=\"main2\"> <img alt=\"2. Evaluate\" src=\"images/evaluate.gif\" /><br /><br /> <ul> <li>Over 100 powerful calculators created by our team of highly-specialized mathematicians gives you ultimate ability to see \"what if\" situations.</li><br /> <li>Solid, provident advice in all major aspects of your financial life, provided by experts.</li> </ul> <br /> </div><!--END OF MAIN2 --> <div id=\"main3\"> <img alt=\"3. Decide\" src=\"images/decide.gif\" /><br /><br /> <p>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.</p><br /> <p>We are assembling the most qualified and wide team of professional advisors in one place than ever before.</p> </div><!--END OF MAIN3 --> <div id=\"align3\"> <ul> <li><a href=\"#\"><img alt=\"Learn More\" src=\"images/learn-more.gif\" /></a></li> <li><a href=\"#\"><img alt=\"Learn More\" src=\"images/demo.gif\" /></a></li> <li><a href=\"#\"><img alt=\"Learn More\" src=\"images/join-free.gif\" /></a></li> </ul> </div> </div><!--END OF MAIN --> <div id=\"main-right\"> <img alt=\"People\" src=\"images/people.gif\" /> </div> <div id=\"main-right2\"> <h5><b><a href=\"#\">The Success Spiral™ <img id=\"align2\" alt=\"Go Arrow\" src=\"images/goarrow2.gif\" /></a></b></h5><br /> <p>What is it? Learn about this <br />powerful concept, and why <br />it is the foundation of our <br />provident philosophy, and <br />your financial success!</p> </div> <div class=\"clear\"></div> </div> </div><!--END OF CONTAINER, AND THUS THE ENTIRE PAGE! --> </body> </html>
and now the CSS:
* { margin:0; padding:0; } body { background-color: #364565; }
<ul> <li><img alt=\"Home Features FAQs About Us\" src=\"images/home-features-faqs-aboutus.gif\" usemap=\"#nav\" /></li> </ul> </div><!--END OF HEADER --> <div id=\"main\"> <img alt=\"Round Arrows\" id=\"align\" src=\"images/round-arrows.gif\" /> <img alt=\"3 Steps to Your Success...\" style=\"margin:0px 0px 30px 10px;\" src=\"images/3steps.gif\" /> <br /> <div id=\"main1\"> <img alt=\"1. Track\" src=\"images/track.gif\" /><br /><br /> <p>\"You cannot improve that<br /> which you do not track.\"</p><br /> <p>Take control of your finances with our easy-to-use tracking and budgeting software and begin the journey to financial freedom.</p> </div> <div id=\"main2\"> <img alt=\"2. Evaluate\" src=\"images/evaluate.gif\" /><br /><br /> <ul> <li>Over 100 powerful calculators created by our team of highly-specialized mathematicians gives you ultimate ability to see \"what if\" situations.<br /><br />Solid, provident advice in all major aspects of your financial life, provided by experts.</li> </ul> <br /> </div><!--END OF MAIN2 --> <div id=\"main3\"> <img alt=\"3. Decide\" src=\"images/decide.gif\" /><br /><br /> <p>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.</p><br /> <p>We are assembling the most qualified and wide team of professional advisors in one place than ever before.</p> </div><!--END OF MAIN3 --> <div id=\"align3\"> <ul> <li><a href=\"#\"><img alt=\"Learn More\" src=\"images/learn-more.gif\" /></a></li> <li><a href=\"#\"><img alt=\"Learn More\" src=\"images/demo.gif\" /></a></li> <li><a href=\"#\"><img alt=\"Learn More\" src=\"images/join-free.gif\" /></a></li> </ul> </div> </div><!--END OF MAIN --> <div id=\"main-right\"> <img alt=\"People\" src=\"images/people.gif\" /> </div> <div id=\"main-right2\"> <h5><b><a href=\"#\">The Success Spiral™ <img id=\"align2\" alt=\"Go Arrow\" src=\"images/goarrow2.gif\" /></a></b></h5><br /> <p>What is it? Learn about this <br />powerful concept, and why <br />it is the foundation of our <br />provident philosophy, and <br />your financial success!</p> </div> <div class=\"clear\"></div>
</div><!--END OF CONTAINER, AND THUS THE ENTIRE PAGE! --> </body> </html>
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
#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.
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 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
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:
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!
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:
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:
and now the CSS:
* {
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;
}
linky
What would you suggest now?
paste the following code inside the head of the markup ..... right after the
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, 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.
and the css:
#container {
margin:70px auto 0;
width:910px;
}
#leftMain {
float:left;
width:647px;
}
#main-right {
background-color:#FFFFFF;
float:right;
height:410px;
width:249px;
}
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
Please elaborate.
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!
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: