...

View Full Version : IE needs your assistance.



A_Grant
02-28-2009, 06:11 AM
I am working on this site. It is my first official site.


As of now the XHTML and CSS is validated with the W3 Org. In Dreamweaver CS4, I fixed the two simple browser compatibility issues with IE 6 and under.



I can't get the Div's to stay laid out like they do in Firefox in IE 7.

Help?



Here is the site.
http://www.biggunrotts.com/


Thanks for the help!

-Adam

PitbullMean
02-28-2009, 06:35 AM
Ok Adam what happen was you added a float with out choosing a display:

try adding this and tell me if it helps


.indexbodycontainerleft {
display:block;
float: left;
height: 500px;
width: 450px;
}

Alot of your code is missing display's

and in ur navcontainer replace it with this


.navcontainer {
display:block;
float: left;
height: 46px;
width: 943px;
}

PitbullMean
02-28-2009, 06:40 AM
Anyway I'm confident that it is now fixed,

Heres all the fixes.


@charset "UTF-8";
/* CSS Document */



body {
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: lighter;
background-image: url(images/header_repeat-x.png);
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}



td img {display: block;}

.bodycontainer {
width: 943px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
height: auto;
}

.toprightcontainer {
display:block;
float: right;
height: 155px;
width: 620px;
}
.topleftcontainer {
display:block;
float: left;
width: 323px;
height: 155px;
}
.logo {
height: 53px;
width: 323px;
margin-top: 63px;
margin-bottom: 41px;
background-image: url(images/BGRlogo.gif);
}
.slogan {
height: 24px;
width: 186px;
margin-top: 103px;
margin-bottom: 28px;
margin-left: 434px;
background-image: url(images/slogan.gif);
}
.navcontainer {
display:block;
float: left;
height: 46px;
width: 943px;
}
.navbar {
height: 36px;
width: 943px;
margin-top: 1px;
margin-bottom: 9px;
}
.footercontainer {
height: 200px;
width: 100%;
clear: left;
background-image: url(images/footer_repeat-x.png);
background-repeat: repeat-x;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
margin-top: auto;
}
.footerbodycontainer {
height: 200px;
width: 943px;
margin-right: auto;
margin-left: auto;
}
.indexbodycontainerleft {
display:block;
float: left;
height: 500px;
width: 450px;
}
.indexbodycontainerright {
display:block;
float: right;
height: 500px;
width: 493px;
}
.indexrottimage {
height: 275px;
width: 450px;
margin-top: 15px;
margin-bottom: 260px;
}
.indexintrotext {
margin-top: 15px;
height: 275px;
margin-bottom: 260px;
margin-left: 10px;
}
.footerbodyleftcontainer {
display:block;
float: left;
height: 200px;
width: 400px;
}
.footerbodyrightcontainer {
display:block;
float: right;
height: 200px;
width: 543px;
}
.indexintrotexttop {
height: 35px;
}
.indexintrotextbot {
height: 240px;
}
.footernewsheader {
height: 45px;
width: 400px;
margin-top: 10px;
background-image: url(images/footer_images/news.png);
background-repeat: no-repeat;
background-position: left top;
}
.footernews {
height: 130px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 16px;
width: 400px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 0px;
}
.footercontactbox {
height: 175px;
width: 453px;
margin-left: 75px;
margin-top: 10px;
margin-bottom: 15px;
margin-right: 15px;
border: thin solid #FFF;
background-image: url(images/footer_images/contactus.png);
background-repeat: no-repeat;
background-position: left top;
}
.footercontactinfotop {
margin-top: 45px;
height: 110px;
}
.footercontactinfobottom {
height: 20px;
margin-left: 10px;
}
a:link {
color: #FFF;
text-decoration: underline;
}
a:visited {
color: #999;
}
a:hover {
color: #FFF;
text-decoration: underline;
background-color: #999;
}

abduraooft
02-28-2009, 10:14 AM
Hi A_Grant, do you know why tables for layout is stupid (http://www.hotdesign.com/seybold/)?

@PitbullMean, giving a float itself will make an element behave like a block level element. So I don't think that an explicit display:block; is required there.

PitbullMean
02-28-2009, 04:58 PM
The fix worked thats all that matters

A_Grant
02-28-2009, 09:38 PM
I am aware that using tables as the base of the page isn't smart..

That's why I didn't do it?



I am having a bit of an issue understanding your post if I didn't use a table to layout my page.

The only table in my page is the table written by Fireworks for the nav bar, but it is contained in yet another div, so that isn't an issue.

Excavator
02-28-2009, 10:07 PM
Hello A_Grant,
I think ab may be refering to your table menu. Just because it's in it's own div doesn't mean it's not a table, it's still a table being used for layout.
No matter, it works for you and that's just fine. If you're interested, that's a very simple table free menu to do, see this example - http://nopeople.com/CSS/anotherNavBar/index.html


Your page has other issues though.
You have the entire page wrapped in .bodycontainer but it's not working. Put a background color on it and you can see what I'm talking about, like this:
.bodycontainer {
width: 943px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
height: auto;
background: #000;
}
Now, if you clear your floats, you will see the div expand to wrap your content. Read about clearing floats here - http://www.quirksmode.org/css/clearing.html
...like this:

.bodycontainer {
width: 943px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
height: auto;
overflow: auto;
background: #000;
}

A two column layout usually only has one float. display:block; isn't needed on either one of them. Have a look at one method 2-column layouts are coded (http://nopeople.com/CSS/equal_length_columns/index.html)
In that example the left column is float:left; and the right column is margin-left the width of the left column.

A_Grant
03-01-2009, 12:45 AM
I added the color like you said..

It seems to be working as I wanted?



The only thing I am using the .bodycontainer for is the "auto" left and right margins, and it is doing just as I wanted it to.


Thank you for your help, I will make sure to re-make my menu with the CSS method.


As for the two column method, there are certain parts of my site (currently unpublished) that use more than two vertical columns.



Also, if the the "display:block" isn't needed then how did it fix my IE issue?




Ahhh! I wish I understood CSS better.



Thanks for helping a beginner take his first baby steps.

-Adam

Excavator
03-01-2009, 01:37 AM
The only thing I am using the .bodycontainer for is the "auto" left and right margins, and it is doing just as I wanted it to.



I understand what your .bodycontainer is doing. By clearing your floats and making the code work properly you can avoid other problems. For one example, I know the guilotine bug can affect an uncleared float.

Have a look a good IE6 bug list and their fixes - http://www.positioniseverything.net/explorer.html

A_Grant
03-01-2009, 01:50 AM
Alright, I will check it out.

I am also having this other problem.. I can post a new thread, but if you're willing to help I can just post it here.



I think it's a javascript issue, but it is really strange.



I'll tell you what the little issue is, and if you don't mind helping, I will post the code.

Issue:

I made two simple gif images. Left arrow and a right arrow. When using one of these arrow's as the link to change the slideshow, it complete hacks up the entire page when viewing it in dreamweaver.


This is honestly the strangest thing I have seen in my few months of coding.


Aha.

Excavator
03-01-2009, 01:59 AM
I know one thing for sure, don't trust the way DW shows your code. DW is famous for rendering code UN-like any known browser. See the sugestion in my sig about checking your work in FF first?

As for your problem, anything could be wrong. We have some very smart people in the js forum. I am not one of them... I have not done much coding with js.

A_Grant
03-01-2009, 02:43 AM
What is the difference in a Div "id" and "class"?

Excavator
03-01-2009, 02:50 AM
An id is more specific but can only be used once on a page.
Styled like this: #name {}
And in the markup like this: <div id="name></div>

A class is a little lower on the level of specificity (http://snook.ca/archives/html_and_css/understanding_c/) but can be used as many times as you want on a a page.
Styled like .name {}
in the markup like: <div class="name"></div>


id VS class (http://www.google.com/search?hl=en&q=id+vs+class)

abduraooft
03-01-2009, 12:20 PM
What is the difference in a Div "id" and "class"?
See http://www.htmldog.com/guides/cssintermediate/classid/

A_Grant
03-01-2009, 04:45 PM
@abduraooft

Thank you, that really did help.



I would honestly be screwed without this forum.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum