CSS Problem with IE

benandal · #1 (**permalink**) 12-04-2008, 01:44 PM

I am currently constructing a new website and am having some issues with IE. In Firefox on PC, Safari/Firefox on a Mac the h1 tag displays perfectly with 'WEDDINGS CATERING' all on one line, but in IE it is splitting the h1 and h1subheading onto two lines

http://www.imaginez-cannes.com/demo/..._catering.html

Any ideas what I'm doing wrong of how to get around it?

Many thanks
Ben

**wige** · #2 (**permalink**) 12-04-2008, 01:54 PM

You can try taking out the margin or padding, see if that fixes the issue. Otherwise, try specifying the class as an inline element. I think that when you specify a margin/padding for an element, IE will default that element to block. Since you are just modifying the font size, let it inherit the margin/padding from the h1 element. Then if you still need to space it properly, use padding-left.

Website Design France · #3 (**permalink**) 12-04-2008, 01:56 PM

Do you mean to the h1 or .h1subheading?

Website Design France · #4 (**permalink**) 12-04-2008, 02:00 PM

Hmmm, I deleted it from both and then added the needed margin: 0; to avoid the big gaps that appeared - still no luck.

Website Design France · #5 (**permalink**) 12-04-2008, 02:05 PM

OK, changed the css to:

h1 {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: #FF6633;
font-size: 20px;
display: inline;
}

.h1subheading {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 11px;
}

but it still doesn't look right in IE

Website Design France · #6 (**permalink**) 12-04-2008, 02:08 PM

by the way, thank you very much for your advice on this - it is one issue I have - debugging sites to work across all platforms...drives me insane!!!

JSeverson · #7 (**permalink**) 12-04-2008, 02:43 PM

Hi,
Try the following. I only tested it in Firefox and IE 6 but it seemed to work fine. If it works in IE 7, just move the inline styles to your style sheet.

<h1 style="float:left">WEDDINGS </h1>
<h2 style="float:left; margin:0px; padding-top:8px; padding-left:2px;">CATERING</h2>

Website Design France · #8 (**permalink**) 12-04-2008, 04:08 PM

Brilliant, works a treat although Safari now has slight issues but I can live with that!
Thanks very much Jeff for your help and advice....and also to wige

Ben

MikeDF · #9 (**permalink**) 12-05-2008, 06:20 PM

I have taken to using something like the following for things like this:

WEDDINGS <span class="small">CATERING</span>

CSS as follows (whatever size you like then):
.small
{
font-size: 0.8em;
}
Seems to work fine....

BluePlanet · #10 (**permalink**) 12-05-2008, 10:21 PM

A small thing but "WEDDINGS" should not be pluralized. It should just be "WEDDING CATERING".

Using the wrong tense or worse changing the tense within a sentence really shows a lack of English understanding and will not help your sales pitch.

**weegillis** · #11 (**permalink**) 12-06-2008, 01:35 AM

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<title>Lining up odd sizes inline</title>
<style type="text/css">
#eg_1 h1,
#eg_1 h2,
#eg_2 h1 {
 display:inline;
 text-align:baseline;
}
#eg_2 h1 span {
 font-size:0.75em;
}
</style>
</head>

<body>
<div id="eg_1">
<h1>WEDDINGS </h1>
<h2> CATERING</h2>
</div>
<div id="eg_2">
<h1>WEDDINGS
<span>CATERING</span></h1>
</div>
</body>
</html>

BASELINE seems to line them up.

In eg_1 the title hierarchy is iffy.

eg_2 maintains association and title level integrity and avoids additional structure. I'd go with what you had in mind originally. The span will inherit the alignment of its parent element, the h1, so will share the same baseline.

Notice that the h1 is contained in a div, to retain block level status in the document flow.

Website Design France · #12 (**permalink**) 01-06-2009, 12:06 PM

Happy New Year everyone!

I am back into work this morning and have an email from this client asking for all instances of the company name to go orange. But this has caused weird results in IE on PC.

As I don't have enough posts as yet I am not able to paste the hyperlink so use the link above, delete 'demo' and paste in /about_imaginez_cannes.(html)

The orange Imaginez word seems to be jumping down and appearing in the middle of two other words.
It SHOULD read: the Imaginez signature of inspirational ideas
It reads in IE: the signature of Imaginez inspirational ideas

Any ideas? I've tried adding and removing margin and padding but no success....

Ben

dmwcons · #13 (**permalink**) 01-06-2009, 04:28 PM

Might be worth looking at the errors reported by W3C markup validation.

Regards, David.

Website Design France · #14 (**permalink**) 01-06-2009, 04:30 PM

ok, i'll have a look...thanks David.

Website Design France · #15 (**permalink**) 01-07-2009, 02:29 PM

I have managed to figure out a few of the errors in my html (which I am in the process of fixing) but the following has stumped me:

Line 14, Column 88: document type does not allow element "h1" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.
…"></a> <span class="display-none"><h1>Imaginez Cannes - Creative Food and Par

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

I've tried tweaking bits but still can't get to the bottom of it... please help!!!

holyinsomniac · #16 (**permalink**) 01-08-2009, 12:17 AM

Benandal,

I feel your pain because making your site work across platform is a challenge on its own. I found this tool very useful.

Check Browser Compatibility, Cross Platform Browser Test - Browsershots

Check it out. Good luck!

Website Design France · #17 (**permalink**) 01-08-2009, 09:31 AM

Thats a great tool - just added the site to the queue so hopefully will get some results - i've ALWAYS had problems trying to debug cross browser, I don't know where to start if I am to be honest.

Has anyone any idea why I keep getting this error:

Line 14, Column 88: document type does not allow element "h1" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

<div id="logo"><span class="display-none"><h1>Imaginez Cannes are a wedding planning company, organising weddings at venues in Monaco.</h1></span></div>

JSeverson · #18 (**permalink**) 01-09-2009, 01:23 PM

Quote:

Originally Posted by Website Design France

<div id="logo"><span class="display-none"><h1>Imaginez Cannes are a wedding planning company, organising weddings at venues in Monaco.</h1></span></div>

Try switching the span and h1 tags around. The span tag is an inline element and you are trying to wrap it around a block-level element.

<div id="logo"><h1><span class="display-none">Imaginez Cannes are a wedding planning company, organising weddings at venues in Monaco.</span></h1></div>

Is there any reason why you can't just apply the display-none class directly to the h1 tag and get rid of the span tag altogether?

Website Design France · #19 (**permalink**) 01-09-2009, 01:58 PM

That works a treat - I did:

<div id="column3-about"><h2 class="display-none">Imaginez Cannes - Creative Food and Party Design</h2>

Brilliant - thanks!

Ben

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Problem	dwrightcwf	Web Programming Discussion Forum	2	05-10-2007 05:08 PM
CSS Problem in IE6	richkoi	Web Programming Discussion Forum	2	05-07-2007 02:47 PM
Another IE/CSS div problem I am sure someone here can fix.	MeanSEO	Graphics & Design Discussion Forum	19	07-27-2006 10:29 PM
Problem 301- 302	ryanforbes	Google Discussion Forum	7	04-13-2006 06:42 AM
CSS Problem	MrLeN	Web Programming Discussion Forum	8	01-06-2004 01:58 PM