21 replies [Last post]
talino
Offline
Regular
Paris, France
Last seen: 9 years 40 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Hi all. I'm totally stumped while working on a site that was supposed to go online this week. Please have a look at www.metramomes.fr. The site validates both XHTML Strict and CSS (except one minor error).

On Firefox, Safari, Opera, Chrome and IE8, the "Accès membres" section at the top right looks just fine. On IE7, it pushes the large logo to the left (which is set to margin: 0 auto, and width: 560px).

I've been going crazy with this for the better part of the evening and I'm really in need of some help. I don't have any more ideas about what could be causing this.

In case you look at the source, please note that I have the exact same problem even if I take the login form out of the #above-header div and into the #header div (except that now the form has a gradient background, but it's not fixing the margins issue).

Please help if you can. Thanks a lot.

P.S. This has nothing to do with the jQuery hover effect, which I've deactivated for testing purposes. Results are the same. Also note that I am not bothering with IE6.

talino
Offline
Regular
Paris, France
Last seen: 9 years 40 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

I'd like to add that if I

I'd like to add that if I modify .region-above-header to the following, then it looks OK but I'm not sure of the implications. I almost never use absolute positioning.

.region-above-header /* This overlays the login form onto the header */ {
	float: right;
	position: absolute;
	right: 0;
}

Thanks for any help.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 9 years 1 day ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Your problem is that you are

Your problem is that you are using h2, which is meant to have its own line, you need to set the width of the h2 to whatever is left after the 560 of the logo and any margins are taken into consideration. Set the width on the h2 within the region-above-header or whatever it is in, i.e. region-above-header h2 { width:260px;float:right}

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

talino
Offline
Regular
Paris, France
Last seen: 9 years 40 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Thank you for your

Thank you for your suggestion. I had high hopes there for a moment but this doesn't solve the display problems. I tried different widths but none of them changed anything because (I think) the h2 was set to inline. Setting it to block and applying width just cropped the h2 text.

Any thoughts?

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 9 years 1 day ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

That never fails for me, 1

That never fails for me,
1 are you sure you got the width right taking any margins or padding into consideration?
2Did you set margin:0 and padding:0 on the h2?

If no to either of those, do number 2 then number 1

If yes try setting it to block, and increasing the width to let the text in, if you don't have enough width for the text, then a complete rethink maybe neccesary.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

talino
Offline
Regular
Paris, France
Last seen: 9 years 40 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

I tried both, still no dice.

I tried both, still no dice. Any combination of parameters only change the width and alignment of the login form, none of them makes it overlap the header gradient without pushing the logo. There is more than enough width, and like I said it looks perfect in any browser on Earth excluding IE7 (and IE6/Lynx...)

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Can't see an issue at least

:? Can't see an issue at least switching IE8 to compatibility mode shows no change. Is this issue resolved?

fyi floats and position:absolute do not sit together , remove the float statements, pos:abs overules them. Be careful with absolute as often you need to be very explicit about the positioning and dimensions, leaving any of these out can cause IE to be confused.

Do not! refer to markup errors as minor especially when they relate directly to the elements that are having issues. You can not nest a block level element in an inline one so you need to remove the div from the anchor or at least move the anchor in wrapping the image only or adding the background to the anchor or a nested span within the heading.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

talino
Offline
Regular
Paris, France
Last seen: 9 years 40 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Thanks for your comments.

Thanks for your comments. The issue is still unresolved. You are right, of course, about floats and absolute positioning. I removed the float and everything still looks OK on all browsers (including IE7), however I would really like to achieve this *without* absolute positioning. I just don't understand why IE7 doesn't behave.

My single validation error is not a markup error, it's the CSS declaration 'word-wrap: break-word;' which I commented out, doesn't help.

I followed your suggestion and nested the anchor inside the div instead of the other way around. Everything still looks bad in IE7 and fine everywhere else. The modification was done locally, but I can put it on the server if you want to have a look.

Actually, I didn't know Compatibility View existed in IE8. When checked, it looks as bad as on IE7...

Pulling my hair out.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm really not sure what you

I'm really not sure what you are seeing that you consider a problem? The page functions just the same in IE7 as in FF 3.

The login is set to the right side so naturally as you shrink the viewport it moves in whilst hugging the right edge, the logo is centred so shifts to the left as you narrow the browser to retain it's centring.

What it may make sense to do is fix a min width as you have for the main content area below the header so that the header doesn't keep shrinking after the main content has stopped , in other words the logo retains a central position in relation to the content below it.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

talino
Offline
Regular
Paris, France
Last seen: 9 years 40 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

The reason it looks the same

The reason it looks the same to you is that the site had to go live and I just used the absolute positioning method.

If you're using Firebug, check out #above-header which says:

#above-header /* This overlays the login form onto the header */ {
	/*float: right;*/
	position: absolute;
	right: 0;
}

You can't uncomment the float property in Firebug but you can deactivated the other two declarations and add "float: right". You'll see it looks fine in Firefox (as it does everywhere else). However, see the attached file for the IE7 result of the above.

Thanks for looking into it.

BTW the content below the menu does *not* use min-width but relies on a (currently invisible) left sidebar. I'll have to add a dummy one to the left of the menu but I'm leaving that for later.

AttachmentSize
ie7-ie8.png 17.47 KB
attilla
Offline
newbie
Portsmouth
Last seen: 10 years 3 weeks ago
Portsmouth
Timezone: GMT+1
Joined: 2009-03-31
Posts: 10
Points: 0

maybe

Hi

I am not sure, but did you tried that?

#above-header {
position:relative;
float:right;
}

???

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 9 years 1 day ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Pointless

Using position:relative without any positioning attributes (i.e left:10px;bottom:20px) is pointless.[img][/img]

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

talino
Offline
Regular
Paris, France
Last seen: 9 years 40 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Yes...

About a zillion times. A zillion and one now, just to make sure Smile Doesn't work either.

Thanks, though.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 2 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:On Firefox, Safari,

Quote:

On Firefox, Safari, Opera, Chrome and IE8, the "Accès membres" section at the top right looks just fine. On IE7, it pushes the large logo to the left (which is set to margin: 0 auto, and width: 560px).

This is because your logo has Layout in IE (not IE8 though).
http://stommepoes.nl/Tests/haslayoutmargins.png

The auto margins of your logo slide under the float in the modern browsers, because the float is partially out of the document flow (the logo doesn't even see the float until the browser is narrow enough to let it get pushed down by the float).

In IE however, because both the float (all floats) and the logo (by having a height and width) have layout, it treats them as equal in the flow. So the logo's margins don't slide under the float (similar to how any static block won't slide under a float in IE if it has Layout).

So absolutely positioning the float works in all browsers because it takes that box out of the flow entirely, every time. It can be safe to do it there if the #header is its nearest positioned ancestor, so it will be limited to the header and won't destroy anything else.

Or, if your markup wasn't made up of a bazillion divs (are you going to add more stuff in there header or what?), you could have just set
text-align: center;
on the #header to center the logo (which normally is inline if you don't wrap it in a bunch of divs) and let the float stay floated right.

All that header really needs is

<div id="header">
  <div>
    all the floated stuff in here, unless that javatrick needs two boxes?
  </div>
  <a href="home"><img src="thelogo" width="whatever" height="whatever" alt="Metramomes"></a>
</div>

and then
#header {
/*you may want to say width: 100% or something here to deal with the scroll problem*/
  text-align: center;
  background: url(thegradient) 0 0 repeat-x;
}
#header div {
  float: right;
  width: whatever;
  text-align: left;
}
#header a {
  remove default anchor styles etc, and maybe style the alt text of the image with #header a img styles;
}

Something like that.

I actually prefer IE's behaviour here because I don't like the way the float drops the logo (that can be coded around, but I think it looks nicer with the logo centered not from the edges of the header but from the edge of the float... to do that I'd put right padding on the #header and then either still float the inner div right and then pull it over the padding with a neg right margin OR just abso-po it over the padding... the automargins of the logo will use the padding as its edge rather than the true edge of the header).

I'm no expert, but I fake one on teh Internets

talino
Offline
Regular
Paris, France
Last seen: 9 years 40 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

Thanks

Thanks a lot for taking the time to write this detailed reply, from which I've learned a lot. The reason you see a bazillion divs is because most of the content isn't there yet. I will be trying out your suggestions in the following days and will keep you posted. I just wanted to say thanks right now Smile

Heel veel bedankt !

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 2 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Ah, I worried about that. I

Ah, I worried about that. I kinda hoped it was just template bloat.

Once more junk gets added in there then any solutions any of us posted might break.

Probably another reason why it's usually better to get all your HTML down first, and THEN try the styling (yeah ok most of us kinda style-as-we-go but that's the principle we're supposed to be following : )

I'm no expert, but I fake one on teh Internets

talino
Offline
Regular
Paris, France
Last seen: 9 years 40 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

I know

But principles and real life have a long history of conflicts... BTW, I don't understand two things you mentioned:

1. Why would a div be inline by default? I thought spans were inline while divs were blocks.
2. I remember reading somewhere that using "text-align: center;" on a div was a bad idea compatibility-wise, and that "margin: 0 auto;" was the proper approach.

The template bloat is a problem I'm having with my Zen-based subtheme in Drupal 6. Long story. I did three things simultaneously while building this site: build the HTML, design the CSS *and* learn Drupal... It shows, I know, but we all need to start somewhere. For now I'm just happy that the site works (for members) and looks just fine. I'll deal with markup optimization when my custom module's code functions properly...

Thanks again.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 2 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Good lord, I took one look

Good lord, I took one look at Drupal and died : ) I probably still have to learn it, but the problem with it is the HTML is inside the PHP, so to write HTML you have to be a PHP developer : ( However Drupal 7 will separate PHP and HTML (yay!). I've seen someone needing to edit 15 PHP files just to add a link inside a list! Ridiculous. But whatever... you work with what you must.

Quote:

1. Why would a div be inline by default? I thought spans were inline while divs were blocks.

2. I remember reading somewhere that using "text-align: center;" on a div was a bad idea compatibility-wise, and that "margin: 0 auto;" was the proper approach.

1. No the div would be a block, however it's just a logo. There's no reason to wrap a logo, or an anchor like that, in a div. You can legally have either the anchor alone or an anchor with an image inside it if you want. In your code, there are divs around your anchor so they are stuck as blocks. But if you just had the minimal code necessary (of course this is no longer true because you are going to have more content in the header, so I'm talking only about your CURRENT code) then you would only have the anchor (or the image if it was an HTML image) which is default inline.

You can have a anchor also set to display: inline-block to let it have the width and height properties of a block, so it could hold the logo as a background image, AND it still can be centered with text-align center! Which is awesome, though doesn't work good in FF2/K-Meleon (there's a hack for that, I hate it). Too bad K-Meleon is not getting updated with FF3's rendering engine.

2. Ah, you confuse two things I think. People used to center block elements with text-align: center back when IE was the main browser and nobody had a doctype. So it would center blocks like divs, inappropriately! The better method is automargins, yes.
But when you have a div who holds an inline child (so

) then you can legally put text-align: center on the div, not to center the div, but to center its inline children (despite the name, text-align aligns more than just text... all inlines, and inline-blocks).

Even I have caught myself trying to center an inline by putting text-align: center on it, but it doesn't work that way. The parent of the inline has to have it. Since the only other child (CURRENTLY) in the #header is the float, who as a block won't be affected by the text-align (but inlines inside it would be, so we gave it text-align: left for its own inline children), then text-align: center was one reasonable choice. However it will center ALL inline children of #header so better CSS would totally depend on the total HTML. Still, even after you add whatever else goes in the header, likely the divitis can be reduced... except it's Drupal and while I've been told by a few people that you can make a Drupal template as lean as you want, you have to really know Drupal well to do that. So you might just be stuck with extra divs with way too many classes on them. This makes the coding and debugging harder, but such are templates.

Quote:

But principles and real life have a long history of conflicts...

Yeah, I know. Happens to all of us. Still, styling HTML and then adding HTML is a recept for hair-loss. Maybe when you need to add more things, make a copy of your header and add stuff there, and after it's styled well, add all that back into your original page. That might be easier plus you don't lose a working page if you hit a bug.

I'm no expert, but I fake one on teh Internets

talino
Offline
Regular
Paris, France
Last seen: 9 years 40 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

You've cleared up my mind

You've cleared up my mind about text-align. I appreciate it (once more).

As to Drupal (completely off-topic), I was feeling just like you until I started messing around with it. No turning back since then. First steps, like everyone warns you, are *extremely* painful. You get frustrated because you have to learn an API just to add a link somewhere. The learning curve is not steep, it's converging on vertical... But if you invest some time and effort, reach a certain height and look at the horizon, the possibilities for site creation will pretty much dazzle you. You'll want to rewrite everything you ever did before Smile And I'm only just starting out.

P.S. HTML is not "inside" the PHP. Both are used for different things. It's very well structured but still immensely flexible. I could explain a couple of things but we'd have to move to another forum...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Poes please wait until you

Poes please wait until you have a little real experience of something as powerful as Drupal before making sweeping statements Smile

text align center used as a 'hack' had nothing to do with people not using a DTD it was to do with those of us around then having to code for IE5. IE5 had no capability of rendering in 'Standards mode' - even though a valid Standards invoking DTD may have been used - and knew nothing of margin:auto but all versions of IE including 6 had the quirk of auto centering a block level element if it's parent had text-align:center declared.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 2 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

This is what I meant by

This is what I meant by "HTML in the PHP" which maybe are the wrong words:
http://drupal.org/node/521922

Seriously I'll be able to wrap my head around that only after I've learned PHP.

Quote:

and while I've been told by a few people that you can make a Drupal template as lean as you want, you have to really know Drupal well to do that.

I'll still stand by this sweeping generalisation. Of course geniuses and those who already know PHP can learn it much faster than us peons... Until I know PHP I am stuck with the default HTML Drupal gives me (I am making bad Drupal sites right now : (. Whether that takes me 3 years to learn or 5 years, I understand it can be done but not until after it's learned. Likely in my case it will take longer.

Re text-align hack: new pages written in this century are still using it, as a hack. I assumed that talino had heard the advice not to use text-align from people warning against this current, common practice (and people are still telling others to use it on other forums) rather than warning them against writing for ancient browsers. But who knows.

I'm no expert, but I fake one on teh Internets

talino
Offline
Regular
Paris, France
Last seen: 9 years 40 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2004-09-09
Posts: 35
Points: 0

The forum post you refer to

The forum post you refer to doesn't have anything mind-boggling to someone who's a bit familiar with PHP. I'm neither a genius nor a PHP guru, I learn by bits and pieces like most people. But Drupal has a *lot* of bits and pieces, it's almost like learning a programming language. It's worth every minute you put into it, though. It's sadly much less beginner-friendly than Wordpress, where you do the 5-minute install, grab a theme from somewhere and start posting. It's also way, way more powerful. All depends on what you need to do.

Every time I finally grasp something new in Drupal, I find myself thinking "Wow, I can't imagine I can do *that* so easily now."