Position Absolute and IE
newbie
Posted: Wed, 2008-08-20 12:58
Hi all...
I am new to this forum, semi-new to CSS and have been an ardent Dreamweaver user for years. I made the decision to begin trying to learn the standards and it's been quite a challenge, but I'm enjoying it so far.
I am working on this site: http://www.hfxweb.ca. I design on a Mac and I test on Firefox on my Mac and then I move on over to the PC which sits almost unused in my office and check out IE as cross-browser compliance is kind of important.
My problem is, I'm not sure I even know the terminology to search for on this issue. I did manage to find out how to display the logo at the top right overtop of other elements of the site and I even managed to fix the issue of it hiding my menu links for awhile.
This morning, I have discovered that while it looks very pretty in Firefox, my banner at the top and the logo both display incorrectly in IE. Now, in addition, because I use includes, the site is in PHP and perhaps this could be causing it. I'd love to know. But, as mentioned, link is:
CSS is here:
http://www.hfxweb.ca/style.css
Template page I created for php includes:
http://www.hfxweb.ca/template.php
If you look at Firefox and then IE you can clearly see what I mean.
Now, I'm aware this site needs serious validating as it has a lot of errors and I promise you with all my heart, I will be working on that, but this issue has to be addressed for the business's sake. Other fixes can happen in the background afterwards. I am willing to bet most of the viewers of this site will probably be using IE.
So, any help or guidance you can give me would be great. I do not need someone to fix it. If I wanted that, I'd pay. I just want to get this working and learn.
Thanks kindly,
msfancypants
Guru
Posts: 2613
Joined: 2005-12-14
Location: Victoria British Columbia
msfancypants wrote:I am new
Posted: Wed, 2008-08-20 13:53
Time to stop and learn to do things the right way, then. The program you mention is known as the "weaver of lies" around here, and that's pretty well what it is. If you rely on DW for design you are running on a dead end street and eventually you will crash.
Time to stop and learn correct design. It will save you endless hours of frustration in the end.
I am not now, nor was I ever, any kind of "dude".
Ed Seedhouse
Moderator
Posts: 5685
Joined: 2005-02-22
Ed, you're being harsh
Posted: Wed, 2008-08-20 14:12
Ed, you're being harsh there. DreamWeaver in code view is fine, I've been using it for years. The OP makes no mention of things looking good in dreamweaver and not in real browsers, but having things looking good in FF but not in IE, so lets not try to correct imaginary problems or push the OP away from a familiar environment whilst they are struggling to learn CSS. Trying to grapple with too many new things at once is never particularly clever.
On Having Layout | The One True Layout | menus by listamatic
Moderator
Posts: 5685
Joined: 2005-02-22
msfancypants, the issue (at
Posted: Wed, 2008-08-20 14:17
msfancypants, the issue (at least in IE7) is the point of origin for #banner. You've only defined a top offset so you are at the vagaries of where the browser thinks the left edge starts. For me the sensible solution is:
- add position:relative to #content
- add left: 0; to #banner
On Having Layout | The One True Layout | menus by listamatic
newbie
Posts: 6
Joined: 2008-08-20
Banner and logo
Posted: Wed, 2008-08-20 14:29
Hi Chris,
Great, will give that a go. How about the logo whose position is fine, but is hiding behind other divs when viewed in IE.
It is my position that any tool which allows you to hand code your site is valuable with the exception of FF which I wouldn't touch with a glove on. I'm very sorry if I offended anyone with my lack of knowledge in certain areas, but we're not born with it. Came here seeking help because of the lack of knowledge.
newbie
Posts: 6
Joined: 2008-08-20
Unfortunately...
Posted: Wed, 2008-08-20 14:36
That did not work. Have a look at it in IE. I'm not certain, but could it be that since the banner is within the header div that maybe the relative entry caused an issue?
Guru
Posts: 2613
Joined: 2005-12-14
Location: Victoria British Columbia
Chris..S wrote:Ed, you're
Posted: Wed, 2008-08-20 14:48
Well so do I, actually. I even use the (shudder) CODE view when I'm typing or pasting word content in, to avoid having to remember html entities. But basically I use DW because the folks I work for bought it for me.
I got the impression he was using DW for design and responded to that. You may be right.
I am not now, nor was I ever, any kind of "dude".
Ed Seedhouse
newbie
Posts: 6
Joined: 2008-08-20
He is a she...
Posted: Wed, 2008-08-20 14:52
... and she codes with DW. She is also a designer but she designs using Photoshop and Illustrator (if graphical design is required). DW is for code, PS and AI are for design, CSS is for layout. Not to worry, I know where you're coming from.
Nevertheless, everyone needs help now and then and that's why I am here.
newbie
Posts: 6
Joined: 2008-08-20
Magic..
Posted: Wed, 2008-08-20 15:34
So now the logo displays correctly over top of everything else. I put the position:relative into the .header CSS instead... I put the .banner back the way it was as the solution you offered pushed my page down in a Picasso type fashion.
Anyhow, I will keep trying. Any suggestions will be most appreciated.
Moderator
Posts: 5685
Joined: 2005-02-22
Sorry, I didn't realise the
Posted: Wed, 2008-08-20 15:34
Sorry, I didn't realise the other bit was the logo. The two CSS items above will fix the green energy image. To fix the logo image, give #logo position:relative.
Elements are rendered in source order. That means things that come later in the source are generally drawn over anything in the same space that appeared earlier in the source. Any item with position (relative, absolute or fixed) is drawn above anything without position. In addition elements with position can use z-index to affect change their stacking order. When you get to z-index and stacking order things may go awry due to differences in implementation between browsers.
I notice you are using empty paragraphs for spacing. Try using margin-top / margin-bottom. Also you have headings in <div class="info">. Use a heading element (H1 ... H6). Headings tell search engines that their content has more value than plain paragraph text, which is often important for good categorisation within the search engine db. They also give context to the content for screen readers. Headings should be used in a natural progression, from a single H1 down. Also try to make them specific rather than general. e.g. Welcome shouldn't go in a heading. No one ever searches on "welcome".
On Having Layout | The One True Layout | menus by listamatic
Moderator
Posts: 5685
Joined: 2005-02-22
msfancypants wrote:So now
Posted: Wed, 2008-08-20 15:39
Anyhow, I will keep trying. Any suggestions will be most appreciated.
I'm not sure what you mean. In IE7 and FF3 the page looks fine with those changes. In IE7 its possible to add styles to a page using the IE developer toolbar. For FF, its possible to add and remove styles from a page using Firebug.
On Having Layout | The One True Layout | menus by listamatic
newbie
Posts: 6
Joined: 2008-08-20
Actually...
Posted: Wed, 2008-08-20 16:35
I have managed to make it appear correctly in FF and IE now, but only on the PC. The banner does not display correctly in FF on a Mac or on Safari, for that matter. *sigh*
I know I can figure this out!