Several IE bugs

[gumbystation]

Microsoft -- DIE!

I have my site (http://www2.onu.edu/~j-smith.6) that I thought was about done. But someone noticed that in IE, I was looking at it with Firefox, the margins don't work correctly. Can anyone help?

I can give you teh code if it would be easier, but either way, it's messed up! Some help.

[toicontien]

Without looking too deeply into your code, it sounds like the IE-Win double-margin float bug (http://www.positioniseverything.net/explorer/doubled-margin.html).

IE-Win doubles the margin of an element in the direction it is floated. A five pixel left margin becomes 10 pixels when that element gets floated left. The solution is to set the affected element's display to inline ( display: inline; ). This doesn't affect any other browser because any floated element become block-level by default.

[gumbystation]

I'm not understanding. I never really grasped the idea of inline

[Jona]

A block-level element has a new line before and after it, and usually occupies 100% of the width of the element contaning it. For example, a DIV inside of another DIV which has a 50% width would also be 50% wide. An inline-level element is essentially the opposite: the element does not create a new line before or after it, it only occupies the space that it requires to be visible. You can change the display level of an element through CSS. Take the following example.


<p style="width: 80%; margin: 0 auto; background: #f00">
Hello, <a href="#">World!</a>
</p>


The above example shows that a P tag is block-level automatically, and an A tag is inline-level.


<p style="width: 80%; margin: 0 auto; background: #f00">
Hello, <a href="#" style="display: block">World!</a>
</p>


The above example uses CSS to control the display of the A tag. Refer to the CSS2.1 specification for more information on display types (there's more than just inline and block) and how they're supposed to be treated by user agents.

[gumbystation]

Okay. With text, I understand that. But what about with <div> and why my div is going to a new line. Should I try to make it inline? If so, how and to which ones?

[Jona]

Originally posted by gumbystation
Okay. With text, I understand that. But what about with <div> and why my div is going to a new line. Should I try to make it inline? If so, how and to which ones?

Your DIV should go to a new line, because it is block-level by default. There is no reason to make it inline. If you want to use a meaningless HTML element that is inline, use the SPAN tag. Obviously you don't need that, however. Let me look at your site in IE...

[Jona]

I would try adjusting the widths of your content/navigation areas, and see if that doesn't prop up the content area.

Edit: Just tried it - if you make the actual content area have a smaller width, it will work just fine.

[gumbystation]

Okay, I'll try that, what about the problem with my image at the top?

[toicontien]

What I was getting at, gumbystation, is that it seems some tag is floated and given a margin on the same side as the tag is floated. Now, only on the element that has a margin on the same side as it's floated should you set it's display to inline to get around Internet explorer doubling the margin.

[gumbystation]

Okay, so I removed the float: left; from my #main id tag. That fixed the new line. I'm happy about that. I'll fix the crappy margins with those. But now, I want to get that stupid image working. Anyone got any help with that?
------------------------------------
Should I put padding on it, so that it pushes off of the <div> tags and not use margins on the picture <div>?
Oh, and I discovered that the float: left; needs to be in there, otherwise it will not work. Let me get something on this...to help figure it out.

[gumbystation]

I showed the code, but have now removed it for forum purposes...go to my site (http://www2.onu.edu/~j-smith.6/) to view it.

[Jona]

Try out the attached.

[gumbystation]

Originally posted by Jona
Try out the attached.

Jona, you are a freakin GENIUS!!! Can you tell me what you specifically changed? I think you should be thrown up for the greatest member award. (if there is one.)

[Green-Beast]

Hello gumbystation,

There is a big difference on how padding is handled, but it's not too
hard to work around. But before we even get to that, first thing you
need to do is fix your markup or change to a lesser DTD such as HTML
4.01 Transitional (but fix it and make it valid anyway whatever DTD
you use). Without looking at your code to heavily (though I did
notice font styles in your markup instead of on your stylesheet!), I
do know that that alone may very well fix the problem. I tested your
page at W3C Validator (http://validator.w3.org/) and got a number of errors. That right there is a big problem. I also tried
validating your stylesheet and it gave me an error due to an open
image tag and failed to test the sheet further, even when pluggin it
the CSS directly. No go. That is likely another part of the problem.
Once the code is all valid the results might be much different. The
if you're still having issues we can take it from there.

&gb;

EDIT: Oops, too late I guess. You should still fix your markup though.

[Jona]

Originally posted by gumbystation
Jona, you are a freakin GENIUS!!! Can you tell me what you specifically changed? I think you should be thrown up for the greatest member award. (if there is one.)

Thanks, but there are lots of members here who are a great deal better than I am -- they just have more important things to do. (And that is usually a good thing.)

I added float: left to your #main DIV, and I made some changes to the #content and #front DIVs.

[Jona]

One more thing to note - you should check out the Shea Image Replacement (http://www.mezzoblue.com/tests/revised-image-replacement/) technique.

[gumbystation]

Originally posted by &gb;
(though I did
notice font styles in your markup instead of on your stylesheet!)

What do you mean by this? What markups of font styles?

Originally posted by &gb;
I also tried
validating your stylesheet and it gave me an error due to an open
image tag and failed to test the sheet further, even when pluggin it
the CSS directly. No go. That is likely another part of the problem.

I got that error too. I feel pathetic....what does that mean? image tag? where at in my CSS?

[gumbystation]

Originally posted by Jona
One more thing to note - you should check out the Shea Image Replacement (http://www.mezzoblue.com/tests/revised-image-replacement/) technique.

Is that to fix the #front that I use for my banner image?

[Jona]

Originally posted by gumbystation
Is that to fix the #front that I use for my banner image?

It's to make it so that your HTML actually makes sense. There's absolutely no point in using CSS for layout if you're not going to pay attention to the structural importance of the HTML you're using.

[gumbystation]

Originally posted by Jona
It's to make it so that your HTML actually makes sense. There's absolutely no point in using CSS for layout if you're not going to pay attention to the structural importance of the HTML you're using.

Okay, that makes sense. For behind-the-scene action, I need to fix that. Okay. Thanks!

[Jona]

Happy to help.

[Green-Beast]

Hello gumbystation,

I don't know what I mean lol. I looked at it before and I could have sworn I saw font-style: or something like this, in the markup, plus some tables if I recall, but I don't see it now. My bad.

To validate the markup you only need to make proper lists and close your tags (12 erros, so really maybe 6 or fewer).

Closing image tags:

HTML Exmaple: <img alt="" src="image.gif" width="??px" height="??px">
XHTML Example: <img alt="" src="image.gif" width="??px" height="??px" /> (or by adding </img> after the HTML code line.)

Same with breaks.

HTML Exmaple: <br>
XHTML Example: <br /> (not the space between the b and /)

Lists need the UL or OL element: unordered list (bullets), ordered list (numbers).

UL Example:
<ul>
<li>Listed item</li>
<li>Another listed item</li>
<li>and so on</li>
</ul>

OL Example:

<ol>
<li>Item numbner 1</li>
<li>Item number 2</li>
<li>and so on</li>
</ol>

You can control the look in the CSS, plus add your own bullets as so:

li { list-style-image : url(bullet.gif);
list-style-position : outside;
}

I hope this helps. If the markup is fixed then you should be able to validate the CSS. I do not understand why it didn't validate the CSS for me when plugging it in directly but it didn't. Who knows, maybe the validator's acting up.

&gb;

[gumbystation]

Okay, it's officially CSS and XHTML validated. Check it out (http://www2.onu.edu/~j-smith.6).

I will be updating it more. Content, maybe rid of that border. And then, finally, I will be buying a domain name. :D Wish me luck!

[Green-Beast]

Not yet man, not the XHTML. Sorry.
Found 6 Errors. Even in a URL & must be written as &amp;amp;
Should be an easy fix, huh? ;)

------------------------------

Regarding your CSS, I don't know how to break this to you but....

W3C CSS Validator Results for http://www2.onu.edu/~j-smith.6/main.css

No error or warning found
Congratulations!
This document validates as CSS! :D

-------------------------------

It's a great looking site by the way, though in my opinion I'd keep the thin blue border. It separates the page from your background.

Oh, and Good Luck!

(Need hosting? ;))

[gumbystation]

Ha, actually, I do. Do you offer domain names too? What would you offer me??? My other possibility is http://mesopiadomains.com/index.php for the domain name and http://mesopia.com/index.php?v=services/business_class for the hosting (Plan 2).

[Green-Beast]

We considered being a domain name registrar. We looked into it and all, then decided not to. Seemed like fluff. Personally, I like Go Daddy as a domain name registrar (http://www.godaddy.com), though I do have one domain registered at Domain Direct (http://www.domaindirect.com), but they are more expensive.

It works like this: We give you an IP address, and tons of stuff actually, how much depends on the plan. After you register your domain name you plug in the nameserver info at Go Daddy. No forwarding. Now two plans don't have this. In which case you park the files on the server (full FTP access) and "forward" the name from Go Daddy to a subdomain we give you. This is also done at the registrar (you'll have a control panel). It's easy. We do offer Flash tutorials on the GBHXonline Support Page (http://gbhxonline.com/gbhxonline_web/supportWIP.htm). Click on Tutorials.

[Jona]

GoDaddy rawks! YEAH! Let's DOOIT!! :D

Sorry, heh, just had to show a bit of enthusiasm -- a bit more than normal. GoDaddy deserves it. I bought a domain name Monday from them.

[gumbystation]

Originally posted by Jona
GoDaddy rawks! YEAH! Let's DOOIT!! :D

Sorry, heh, just had to show a bit of enthusiasm -- a bit more than normal. GoDaddy deserves it. I bought a domain name Monday from them.

Do you think they are better than http://mesopiadomains.com/index.php. If so, why?

[Jona]

To begin with, their main page says they are down for maintenance. That's an instant turn-off.

Also, their prices are almost twice the price of GoDaddy's. For one year, it costs $12.95. At GoDaddy, it costs $6.75 for one year (on a .com domain). I've used GoDaddy more than once, and every time it's been a reasonably good experience. Some places are cheap - not just inexpensive. GoDaddy is of good quality and low price. I would take advantage of that while you still can. ;)

[gumbystation]

Cool. I think I will. What about hosting...?? Besides &gb;. Nothing against ya...just want to see some options.

[Jona]

Originally posted by gumbystation
Cool. I think I will. What about hosting...?? Besides &gb;. Nothing against ya...just want to see some options.

That depends on what you need. If you need a power package with a good deal of disk space and bandwidth, I'd go for iPowerWeb (my CMM host). If you want more options for smaller packages, you should check out A Small Orange. (And, as you may have guessed, add ".com" to the end of those two names and you'll find the appropriate sites.)

[Green-Beast]

Originally posted by gumbystation
Do you think they are better than http://mesopiadomains.com/index.php. If so, why?

Not being familiar with the other registrar I have nothing to offer good or bad. I didn't even look at their pricing when I check ed yesterday. I do know, however, that Go Daddy is good so at least it's not a crap-shoot so to speak.

As far as hosting, gumbystation, that's cool. Do shop around. I know we don't have the lowest or highest prices on the internet, but they are reasonable and we offer a lot of control (via Ensim user interface) and a ton of tools and options. I've been in busiess forever so the GBHXonline management is professional and reliable which can be a good thing if push comes to shove as they say. But I'm not on this forum to sell hosting so no push from me. I encourage you to do whatever you're comfortable with and can afford. We are here for you, though.

Jona, you really need to recommend GBHXonline! ;)

[Jona]

Originally posted by &gb;
... crap-shoot ...

That's what happens when you steal a monkey's banana! :D

[gumbystation]

As this is my first website and I'm going to be a small company anyways, I'm going to leave it to just one company to do the hosting and domain name. Sorry &gb;. BUT, I will be asking you for design, and there for will put you in my resource list!!

[Green-Beast]

Originally posted by gumbystation
As this is my first website and I'm going to be a small company anyways, I'm going to leave it to just one company to do the hosting and domain name. Sorry &gb;. BUT, I will be asking you for design, and there for will put you in my resource list!!

Sweet. Thanks man.