473,322 Members | 1,523 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

browser incompabilities

I have a problem that I can't fix. I'm guessing that because it appears to
work fine in FireFox and not in IE that the problem is with the browers and
not with the CSS. But, here goes; If somebody can help me figure out a happy
compromise that doesn't require javascript I'll be a happy camper.

I have a banner that is basically a list with 3 elements. The CSS is below:

li.banner {
margin:10px 0 0 0;
list-style-type:none;
padding:0;
}

li.banner h1 {
text-align:center;
/* background-color:#FFFFFF; */
background-color:transparent;
border-bottom:1px solid #FF0000;
border-top:1px solid #FF0000;
height:68px;
margin:0 118px 0 20px;
padding:30px 10px 0px 0px;
overflow:hidden;
}

..banner span {
background:url(img/BannerBoxRt.gif) right no-repeat;
display:block;
}

..banner span span {
background:url(img/BannerBoxLeft.gif) left no-repeat;
margin:0;
display:block;
}
The HTML to generate the banner looks like this:

<li class="banner"><span><span><h1>Banner</h1></span></span></li>

This technique works beautifully in FireFox. However, in IE6 it leaves a gap
between the left image and the H1 element. If I change the left margin for
H1 to 0 it works in IE but covers the left image in FireFox. Anybody have a
suggestion how I might be able to fix this problem?
Aug 6 '05 #1
14 1501
Els
Corona wrote:
I have a problem that I can't fix. I'm guessing that because it appears to
work fine in FireFox and not in IE that the problem is with the browers and
not with the CSS. But, here goes; If somebody can help me figure out a happy
compromise that doesn't require javascript I'll be a happy camper.

I have a banner that is basically a list with 3 elements. The CSS is below:
[snip code]
This technique works beautifully in FireFox. However, in IE6 it leaves a gap
between the left image and the H1 element. If I change the left margin for
H1 to 0 it works in IE but covers the left image in FireFox. Anybody have a
suggestion how I might be able to fix this problem?


How about you providing an online example?
You don't really expect anyone to copy and paste your code into an
html page, imagine which doctype you use and guess the size of the
images and then make images in the right sizes and upload the lot to a
webserver and /then/ check what the problem is?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Mud - Tiger Feet
Aug 6 '05 #2
Corona <co*************************@yahoo.com> wrote:
<li class="banner"><span><span><h1>Banner</h1></span></span></li>


This is invalid HTML. The SPAN element can not contain H1 elements.

--
Alexander
Aug 6 '05 #3

"Els" <el*********@tiscali.nl> wrote in message
news:19*****************************@40tude.net...
Corona wrote:


<snip>
This technique works beautifully in FireFox. However, in IE6 it leaves a
gap
between the left image and the H1 element. If I change the left margin
for
H1 to 0 it works in IE but covers the left image in FireFox. Anybody
have a
suggestion how I might be able to fix this problem?


How about you providing an online example?
You don't really expect anyone to copy and paste your code into an
html page, imagine which doctype you use and guess the size of the
images and then make images in the right sizes and upload the lot to a
webserver and /then/ check what the problem is?


Good point - thanks for the suggestion...

You can find a sample of the problem at:
http://starship.atspace.com/bug.htm
Aug 6 '05 #4

"Corona" <co*************************@yahoo.com> wrote in message
news:St**************@newssvr30.news.prodigy.com.. .

I have a problem that I can't fix. I'm guessing that because it appears to
work fine in FireFox and not in IE that the problem is with the browers and
not with the CSS. But, here goes; If somebody can help me figure out a
happy
compromise that doesn't require javascript I'll be a happy camper.

I have a banner that is basically a list with 3 elements. The CSS is in the
Style tag on this page:

http://starship.atspace.com/bug.htm

This technique works beautifully in FireFox. However, in IE6 it leaves a
gap
between the left image and the H1 element. If I change the left margin for
H1 to 0 it works in IE but covers the left image in FireFox. Anybody have
a
suggestion how I might be able to fix this problem?
Aug 6 '05 #5
Els
Corona wrote:
"Els" <el*********@tiscali.nl> wrote in message
news:19*****************************@40tude.net...
Corona wrote:


<snip>
This technique works beautifully in FireFox. However, in IE6 it leaves a
gap
between the left image and the H1 element. If I change the left margin
for
H1 to 0 it works in IE but covers the left image in FireFox. Anybody
have a
suggestion how I might be able to fix this problem?


How about you providing an online example?
You don't really expect anyone to copy and paste your code into an
html page, imagine which doctype you use and guess the size of the
images and then make images in the right sizes and upload the lot to a
webserver and /then/ check what the problem is?


Good point - thanks for the suggestion...

You can find a sample of the problem at:
http://starship.atspace.com/bug.htm


As Alexander already said, it's invalid code.
And also the <li> without a <ul> isn't exactly what I call valid.
Try it with <h1><span>Design Elements Tutorial</span><h1> instead.

There's also an error in your CSS:
Change font: into font-family: in the styles for the body element.

After you've made those changes, (and adapted the CSS to combine with
the new order of html elements) see if it still goes wrong?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Aug 6 '05 #6
Els
Els wrote:
http://starship.atspace.com/bug.htm


As Alexander already said, it's invalid code.
And also the <li> without a <ul> isn't exactly what I call valid.
Try it with <h1><span>Design Elements Tutorial</span><h1> instead.


I see you've changed the h1 to read "CSS Design Bug".
Please, don't call it a bug until it really /is/ a bug.
I'm pretty sure it isn't a bug, and merely the result of invalid code
or lack of CSS skills.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Dirty White Boy - Badlands
Aug 6 '05 #7
Corona wrote:
... Anybody have a suggestion how I might be able to fix this
problem?


Please fix the errors first, then we'll see...

<http://validator.w3.org/check?verbose=1&uri=http%3A//starship.atspace.com/bug.htm>

--
-bts
-This space intentionally left blank.
Aug 6 '05 #8

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:sp*****************@twister.nyroc.rr.com...
Corona wrote:
... Anybody have a suggestion how I might be able to fix this
problem?


Please fix the errors first, then we'll see...

<http://validator.w3.org/check?verbose=1&uri=http%3A//starship.atspace.com/bug.htm>


thank you. problem fixed..
Aug 6 '05 #9

"Els" <el*********@tiscali.nl> wrote in message
news:9p*****************************@40tude.net...
Corona wrote:
"Els" <el*********@tiscali.nl> wrote in message
news:19*****************************@40tude.net...
Corona wrote:


<snip>
This technique works beautifully in FireFox. However, in IE6 it leaves
a
gap
between the left image and the H1 element. If I change the left margin
for
H1 to 0 it works in IE but covers the left image in FireFox. Anybody
have a
suggestion how I might be able to fix this problem?

How about you providing an online example?
You don't really expect anyone to copy and paste your code into an
html page, imagine which doctype you use and guess the size of the
images and then make images in the right sizes and upload the lot to a
webserver and /then/ check what the problem is?


Good point - thanks for the suggestion...

You can find a sample of the problem at:
http://starship.atspace.com/bug.htm


As Alexander already said, it's invalid code.
And also the <li> without a <ul> isn't exactly what I call valid.
Try it with <h1><span>Design Elements Tutorial</span><h1> instead.

There's also an error in your CSS:
Change font: into font-family: in the styles for the body element.

After you've made those changes, (and adapted the CSS to combine with
the new order of html elements) see if it still goes wrong?


The missing <ul> was an oversite and probably the main cause of the problem.

As to the font property, I'm under the impression that it's a superclass of
all the other font* properties. As such it's my understanding that all of
the other property values are valid. Is that wrong?

I wrapped the <li>'s in a <ul> and replaced the spans with a div. Problem
fixed. Thanks for the help.
Aug 6 '05 #10

"Els" <el*********@tiscali.nl> wrote in message
news:o2***************************@40tude.net...
Els wrote:
http://starship.atspace.com/bug.htm


As Alexander already said, it's invalid code.
And also the <li> without a <ul> isn't exactly what I call valid.
Try it with <h1><span>Design Elements Tutorial</span><h1> instead.


I see you've changed the h1 to read "CSS Design Bug".
Please, don't call it a bug until it really /is/ a bug.
I'm pretty sure it isn't a bug, and merely the result of invalid code
or lack of CSS skills.


I guess that would depend on what you consider a bug. For me anything that
causes my source to behave in a way that was unintended is a bug. I wasn't
calling it a bug with the design of the CSS specification or the browsers.
Just wanting someone viewing the page to be reassured that they were in the
right place. Please try not to read more into it than is actually there. ;)
Aug 6 '05 #11

"Alexander Clauss" <ac*****@hrzpub.tu-darmstadt.de> wrote in message
news:1h0vhxm.8rl25czbuxfoN%ac*****@hrzpub.tu-darmstadt.de...
Corona <co*************************@yahoo.com> wrote:
<li class="banner"><span><span><h1>Banner</h1></span></span></li>


This is invalid HTML. The SPAN element can not contain H1 elements.


Thank you Alexander. I didn't know that H1 tags weren't supposed to go
inside <span> tags. Looking at the HTML 4 spec it looks like the only
difference between a <span> and a <div> is that the <div> tag is block-level
and <span> is inline. Does that mean that H tags can only go in block-level
containers?
Aug 6 '05 #12
Els
Corona wrote:
"Els" <el*********@tiscali.nl> wrote in message
news:o2***************************@40tude.net...
Els wrote:
http://starship.atspace.com/bug.htm

As Alexander already said, it's invalid code.
And also the <li> without a <ul> isn't exactly what I call valid.
Try it with <h1><span>Design Elements Tutorial</span><h1> instead.
I see you've changed the h1 to read "CSS Design Bug".
Please, don't call it a bug until it really /is/ a bug.
I'm pretty sure it isn't a bug, and merely the result of invalid code
or lack of CSS skills.


I guess that would depend on what you consider a bug. For me anything that
causes my source to behave in a way that was unintended is a bug. I wasn't
calling it a bug with the design of the CSS specification or the browsers.


Well, when you post on Usenet, and especially in groups that deal with
the effect of CSS and HTML code, it would help greatly if we were all
using the same words for the same things. Especially since 'bug' has a
very distinct meaning in these groups.

When a browser doesn't follow the standards, and/or behaves
'irrationally' (for want of a more suitable word), it's called a bug.
If a browser doesn't do what you want/intend, because you didn't tell
it what you wanted/intended, it's called 'author's mistake' ;-)
Just wanting someone viewing the page to be reassured that they were in the
right place. Please try not to read more into it than is actually there. ;)


Nope, I read it just like it was intended I think - a question to find
out why IE didn't do what you wanted :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Smokie - If You Think You Know How To Love Me
Aug 6 '05 #13
"Corona" <co*************************@yahoo.com> wrote:
Looking at the HTML 4 spec it looks like the only difference between
a <span> and a <div> is that the <div> tag is block-level and <span>
is inline. Does that mean that H tags can only go in block-level
containers?


The best way to find out (IMHO) is to read the DTD.

Where may H1 be inserted into? Search for H1

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">

ENTITY is to group things together as a shortcut. So look further.

Where may %heading be insert into?
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

Where may %block be insert into?
<!ENTITY % flow "%block; | %inline;">

Where may %flow be insert into?
<!ELEMENT DIV - - (%flow;)* -- generic language/style
container -->
<!ELEMENT OBJECT - - (PARAM | %flow;)*
-- generic embedded object -->
<!ELEMENT (INS|DEL) - - (%flow;)* -- inserted text, deleted text
-->
<!ELEMENT DD - O (%flow;)* -- definition description -->
<!ELEMENT LI - O (%flow;)* -- list item -->
<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) -- form control
group -->
<!ELEMENT BUTTON - -
(%flow;)* -(A|%formctrl;|FORM|FIELDSET)
-- push button -->
<!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table
data cell-->

There we go, finaly ELEMENT definitions. %flow, thus %block, thus
%heading, thus H1 may be inserted into these elements.

Bye,
Martin
Aug 7 '05 #14
Corona <co*************************@yahoo.com> wrote:
Does that mean that H tags can only go in block-level
containers?


the short version:
- Block level elements may contain block and inline level elements
- Inline level elements may only contain inline level elements.

There're a few exceptions from these rules (for example the P element
can not contain any block level elements), and you should read the HTML
specification and the DTD to find out all the details.

--
Alexander
Aug 7 '05 #15

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Szar | last post by:
JS noob. I've seen plenty of browser detection scripts but they all seem to be slightly different and don't really fit my needs. I have various places where if the browser is IE I'd like to display...
16
by: Java script Dude | last post by:
To all Mozilla JS Guru's (IE dudes welcome), I have spent the last three years developing complex DHTML applications that must work in IE 5.5sp2+ but I use Mozilla 1.3+** to do all my...
17
by: lawrence | last post by:
How is it possible that the question "How do I detect which browser the user has" is missing from this FAQ: http://www.faqts.com/knowledge_base/index.phtml/fid/125 and is only here on this...
2
by: Craig G | last post by:
is there a way to distinguish whether a client is using IE or Netscape? is there some sorta check i can run on the Page_Load event? or where would be the best place to do this? Cheers, Craig
1
by: Dave Harrington | last post by:
Greetings all - We have a client who uses Lotus Notes as their default e-mail. The version of Lotus they use can run internet explorer windows within Lotus. I'd like to find if they are...
4
by: Peter Larsen | last post by:
Hi, I want to be able to show a file browser embedded on a form - a browser which is similar to the browser you get by SHBrowseForFolder(). Is that possible ? Thank you in advance. BR Peter...
15
by: CMM | last post by:
So I'm half way through overseeing a large project in ASP.NET 2.0. My superiors have decided that it would be nice if we ensured the site worked on all the major platforms (as they see it: IE,...
16
by: petermichaux | last post by:
Hi, Does anyone have a a cross-browser setOpacity function that does not use browser sniffing? I looked at the Yahoo! UI function and it detects IE by looking for window.ActiveXObject. I also...
5
by: Mufasa | last post by:
We want to keep track of what OS/Browser people are using for our website. How can I find that out so that I can write it to a DB ? I know how to get it into the DB; I just need to know how to get...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.