IE issue with site

I just finished a website for a client at:

http://www.logisync.com/

All browser like the site except IE… it seems to like to cut the banner off at the very bottom. can anyone tell me why this is happening by looking at the code… or the CSS zip I have attached… thanks.

I am not a big fan of IE at the moment.

I can’t look in IE at work right now, but on a side note, just from looking at the code, I think you kind of negated the point of using divs. Seems like you would have had less code if you just went ahead and did tables eek. Also on your main navigation anchor tags, is there a reason why you decided to use Javascript image swap instead of CSS hovers? :look:

I guess there is always more to learn… I just used dreamweavers image rollover function. do you have a good tutorial on the css image swap?

I like to learn the right ways. thanks.

Holy divitis batman

80% of your divs can be removed because you keep using a div within a div just to add padding…

Like, the logo for instance, you have

<div class="logo">
          <div class="indent">
            <h1>Logisync</h1>
            <p class="style6"><img src="images/tag-spacer.gif" alt="" width="5" height="2" />systems solutions through innnovative technology</p>
          </div>

when you could have ditched .indent and adding the left padding to .logo …

also, pretty sure if you define a height for your banner IE will show it properly…

i HIGHLY suggest re-coding this after doing more research on divs, and looking at more examples of good code.

looks like I need to learn a little more about divs… thanks… I will check the height on this. Thanks for the tips.

My entire philosophy behind divs,

is,

use one <div></div> for a chunk of content,

use other things like span, paragraph tags, etc, to design your content WITHIN the div,

its a container element, most of the padding and adjustments can be done with the other elements I mentioned.

Here’s a tutorial on how to do rollovers with CSS,
http://www.alistapart.com/articles/sprites

Check this out for the image rollovers… http://www.alistapart.com/articles/sprites/ (edit sigh faster…)

Also as fasterthanlight said, you might want to think about re-coding your website. You could accomplish everything you have with 1/10 of the amount of divs.


<div class="container"> <!-- for centering if you want -->
  <ul class="main_nav">
    <li><a href="#">home</a></li> ....
  </ul>

  <div class="header">
    banner stuff
  </div>

  <div class="content">
    rest of your page (you can even put your footer in here if you want)
  </div>
</div>

That’s pretty much all the divs you ideally would need. Unless, of course you get into left/right columns content… but all your paddings/spacings/etc can be done with CSS on other tags like <p>'s, <span>'s, etc (like fasterthanlight mentioned).

GL! :thumb2:

[QUOTE=fasterthanlight™;2346439]My entire philosophy behind divs,

is,

use one <div></div> for a chunk of content,

use other things like span, paragraph tags, etc, to design your content WITHIN the div,
[/QUOTE]

Yep, don’t think there is any other way to say it than that. And id/class for the other things inside the <div></div> block that need their own or different properties.

I just give everything a class, and go through that, leaving every element inside a div, class-less and id-less (more or less)

for example,


<div class="some_container">
<h1>Heading!</h1>
<h2>Second heading! probably a tagline!</h2>
<p>
LOREM IPSUM, YO!
</p>
<ul>
<li>LIST</li>
<li>LIST</li>
</ul>
</div>


.some_container h1 { color: #ffcc00; }
.some_container h2 { color: #ff0000; }
.some_container p { margin: 10px; }
.some_container ul { list-style: none; }
.some_container ul li { display: block; }

That way, the CSS you are applying is only being applied to elements within .some_container, which is good if you have to give like, a list item more padding in one div, than another div, avoiding giving each ul a different class to make your adjustments

and you avoid writing too many classes this way, too

In the end, the less HTML markup, the better, and the more creative you use it, the better, and the fewer classes, the cleaner your code, the easier it is to update and maintain

*note: you can use ID’s if you want, but IDs mostly only exist for JavaScript’s sake, i never give anything an ID anymore.

** Off Topic:
^ ewww you line break your <p> tags from the text :stuck_out_tongue:

and indent the text one more space inside the <p></p> as well, just like how I format any other block level element.
you should see how i indent my code, its hawt

especially my css indentation style

:lol:

listen to faster, he’s bang on the money.

except with,

*note: you can use ID’s if you want, but IDs mostly only exist for JavaScript’s sake, i never give anything an ID anymore.

Use ID’s to uniquely identify a sector i.e. <div id=“footer”>blah</div>, you should never need 2 footer sectors (another example is a header/banner) and it’s good document structure rather than classing it because classes can be duplicated, something to do with that [U]s word[/U] everyone keeps mentioning.

■■■■ thine S word, I understand the concept behind IDs for things like #header, #footer, but other than those two instances, (I know i’m being very black & white with this argument) whats the point?

. is one keystroke, # is two :stuck_out_tongue:

Its all personal preference I think … except for the Semantic argument, which obviously makes a lot of sense.

Heh, i dont know, one of the developers and I had an “argument” (not really) about this one day, i forget what his points were, but they made some sense, with respect to JavaScript (I interface a lot with JS, and my IDs were’nt allowing him to use IDs so i had to change everything, and it kind of just stuck with me)

Damn thine S word, I understand the concept behind IDs for things like #header, #footer, but other than those two instances, (I know i’m being very black & white with this argument) whats the point?
Larger projects tend to end up with a lots of unique elements used throughout a site in various locations, things like navigation, search, advertising etc. ID adheres to the notion of s word type shenanigans and works well in team environments because it’s cleaner and less ambiguous than classes.

I think of IDs as the most special top level sector, and design my markup that way, rarely use them, avoid IDs within an ID - reserve that for javascript’ing and always go out with clean pants on.

It is personal preference tho. The main thing is don’t go mad with classing and id’ing within a given sector, let the html and css handle it.

(on windows # is one keystroke)

Yea I hear that, all I’m saying is, when the new HTML comes out, there will be no need to use any IDs for CSS purposes, purely JS

Yay <header></header> :smiley:

html5 ftw

[quote=fasterthanlight™;2346629]and indent the text one more space inside the <p></p> as well, just like how I format any other block level element.
you should see how i indent my code, its hawt

especially my css indentation style

:lol:[/quote]

Yeah I glanced at your CSS on your website a while back (when I PM-ed you about that spacing issue) and I thought my brain was going to explode. :stare:… But hey everyone does it different and if your the only one working on it then it doesn’t really matter. :smiley: