Absolute position problem in IE

HTML & CSS
1

I am struggling to position elements on a temporary page. We (the designer and I) thought that it would be simpler to put a big image as a background and simply code the links.

I’ve been trying many things but to no avail … and I’m not sure what IE bug to look for … I have IE9 at home and IE8 at work and they both render the same way.

I have another link to position under ‘Visitez’ but untill I get the email link to align correctly, I’m not even trying to position that second one.

The element I’m trying to position is the email (info(a)…) which goes on top of the 1 800 number.

Here is the page :
Accueil

And CSS should be :
http://pages.videotron.com/dragon64/styleinnovasteam.css

Thanks for your guidance on this one … I’m lost

2

It’s not a good idea to use position:absolute for much layout. It’s very inflexible.

Anyhow, your code currently doesn’t work in any browser, because the email address is positioned relative to the browser window, meaning that if the window is resized, the email address will move.

To keep the email address where you want it (assuming you stick with position:absolute) you need to apply position:relative to that element’s container, so that the email address knows what it is meant to be positioned in relation to. So:

.twoColFixLt #mainContent {
  height: auto !important;
  margin: 0 0 0 401px;
  min-height: 900px;
  padding: 0 0 20px 15px;
  [COLOR="Red"]position:relative;[/COLOR]
}

.twoColFixLt #mainContent h3 {
  font-size: 12px;
  height: 1%;
  [COLOR="Red"]left: 456px;[/COLOR]
  position: absolute;
  top: 375px;
  width: auto;
}
3

Ooook … the other way I tried was to use padding top and left … would that work better? There too IE was not behaving because … of … the 3px thingy? Or was it the double margin ? When I used padding, in IE the email address ended up waaaay at the bottom, something like 50 pixels after the last element of the background picture.

And I believe that word ‘English’ at the top right moved when I applied the paddings … which I found odd.

And if the browser window is resized, I am expecting the email to follow with the phone number, which would be a good thing.

Gonna walk away from this untill tomorrow. Or would it be better to enclose that email addy in another ‘div’ ?

*shrug

Thanks for your input too!

4

I guess if the page is otherwise finished, just use position:absolute as I gave it above. Ideally, all of the text you have in the image should be real text, so that search engines can see it, as well as people using screen readers etc.

5

This is a stunning and stellar example of EXACTLY what I mean by “time to kick the PSD jockey square in the …”

The giant fat slow to load bloated image, with fixed height non-dynamic background elements is a miserable FAILURE at web design and development. This is EXACTLY why the “guy who draws pretty pictures in photoshop” should be the LAST person in developing a site, not the first… Everything about that image is going to repeatedly butt heads with accessibility, ease of coding, ease of maintenance, and hosting costs for the client. There is no logical document structure, noplace to plug in real content, it most certainly will be useless to all the netbook, smartphone and pad users… I pity ANY client that is ignorant enough of the Internet to greenlight such a page.

Tell the photoshop guy to learn something about designing for the web, or to go back to working on print.

6

Ralf: thank you for your input, we’ll go with that for now. Because this is a temporary page, I’m not worried about search engines or devices … the Company is not completely up and running and they don’t want too many people calling them. A real web shop will worry about all that in a few weeks.

Deathshadow60: I totally get what you’re trying to say and you are right, what I’m doing is the ‘what not do 101’ book. This is a quick and dirty TEMPORARY page while the Client is shopping for a real Web Company. I do this nights and weekend (I do have a day job, nothing close to web coding or design) for fun and learning bits and pieces as I go. BOTH the designer (it’s a she) and the Client know that I’m a total newb and I DO NOT pretend to be close to a professional. They asked if I can help out so that they can have a page up as soon as possible - which I do for free. To code the whole thing from scratch would take me way too long and it would be a waste of time (good practice, yes) since this won’t be up for long.

I come here because I get awesome hints from the Sitepoint group and up until now, nobody made me feel the way you are making me feel. As I said, I totally understand where you are coming from but I hope that my explanation helped you understand where WE’RE coming from?

And I don’t want to start a debate here. You told me what you had in your mind, I explained it, end of this discussion please.

7

Sorry to bother you guys again with my aweful site but I really need your help again.

I positioned the second part of the section that needs to link to another page. Right now, that green link is way down at the bottom where the footer would sit.

It needs to be in the other white rectangle, under ‘VISITEZ’. There is something I’m really not understanding here. Why is it going there? Is it because of the infamous absolute positioning?

Here’s a snippet of the list:

#linkss {
list-style-type: none;
/display:block;/

}

#linkss li {
font-size:12px;
font-weight:bold;
line-height:15px;
/margin:515px 0px 0px 458px;/
/*float: left; */
}

The infamous site
Accueil

And CSS should be :
http://pages.videotron.com/dragon64/...nnovasteam.css

Thank you

8

OK, as a quick fix, you need to set some positioning on that, such as this:

#linkss {
    list-style-type: none;
    width: 180px;
    position: absolute;
    left: 456px;
    top: 520px;
}
9

Oh dear, and I was trying to run away from absolute positioning!

Thank you so much Ralph, it works :slight_smile: I’ve learned another great lesson from this community, keep up the good work!

10

Which is a good idea. But for this situation, which is a quick and temporary page, you might as well just go with it.

11

Yeah … I hope I won’t have to do that again. I need to learn to say no sometimes.

Thanks again for the help!

12

In other words the difference between Jeremy Irons and Christopher Walken? Sometimes, you need to know when to say no to a project? :smiley:

13

Exactly :wink:

P.S. : Deathshadow, your avatar suits you very well (after your ‘flame post’, while I was licking my wounds, I read many of your posts to see what type of monster you were … to find out you were just blunt not a monster :slight_smile: ).