position absolute different in IE than firefox, help!

L

leskaPaul

I'm stumped with a case of position: absolute behaving as expected in
firefox but not in IE6. Here are links to what it looks like:

firefox: http://www.flickr.com/photos/8270250@N06/1924432229/
ie: http://www.flickr.com/photos/8270250@N06/1925262398/

And here is the html followed by the css:


<html>
<head>
<link rel="stylesheet" type="text/css" href="templateModel.css"/>
</head>
<body>
<div id="containerWrapperOuter">
<div id="containerWrapperInner">
<div id="container">
<div id="outerBorderTopImage">&nbsp;</div>
<img id="headerImage" src="mastheadFake.jpg"/>
<div id="main">
<div id="leftBar"><img src="sideImgFake.GIF"/></div>
<div id="contentWrapper">
<div id="content">
<p>Here is some text. The quick brown fox jumped over the lazy
dog.
That sentence is famous because it has all 26 characters of the
English alphabet.</p>
<p>Here is some text. The quick brown fox jumped over the lazy
dog.
That sentence is famous because it has all 26 characters of the
English alphabet.</p>
<p>Here is some text. The quick brown fox jumped over the lazy
dog.
That sentence is famous because it has all 26 characters of the
English alphabet.</p>
<p>Here is some text. The quick brown fox jumped over the lazy
dog.
That sentence is famous because it has all 26 characters of the
English alphabet.</p>
<p>Here is some text. The quick brown fox jumped over the lazy
dog.
That sentence is famous because it has all 26 characters of the
English alphabet.</p>
</div>
</div> <!-- end div 'contentWrapper' -->
</div> <!-- end div 'main' -->
<div id="outerBorderBottomImage">&nbsp;</div>
<div id="footer"><img style="width: 698px" src="footerFake.jpg"/></
div>
</div> <!-- end div 'container' -->
</div> <!-- end div 'containerWrapperInner' -->
</div> <!-- end div 'containerWrapperOuter' -->
</body>
</html>


body {
text-align: center;
border: 2px blue solid;
}

#outerBorderTopImage {
visibility: visible;
background-color: yellow;
}

#outerBorderBottomImage {
visibility: visible;
background-color: purple;
}

#containerWrapperOuter {
visibility: visible;
background-image: url(outerVertGrad.jpg);
width: 800px;
margin-left: auto;
margin-right: auto;
}

#containerWrapperInner {
visibility: visible;
background-image: url(vertGradient.jpg);
width: 750px;
margin-left: auto;
margin-right: auto;
}

#container {
visibility: visible;
background-image: url(contentBg.jpg);
padding: 0px;
margin: 0px;
width: 698px;
margin-left: auto;
margin-right: auto;
}

#headerImage {
width: 698px;
height: 161px;
vertical-align: top;
padding: 0px;
margin: 0px;
}

#leftBar {
position: absolute;
width: 188px;
border: 1px red solid;
}

#contentWrapper {
margin-left: 188px;
background: url(bg_gradientTop.GIF) repeat-x #bccbc1;
background-position: top;
}

#content {
background: url(bg_gradientBottom.GIF) repeat-x;
background-position: bottom;
padding: 1px;
}

#footer {
width: 698px;
margin: 0px;
padding: 0px;
background-color: #f3f0e6;
padding-top: 20px;
}
 
C

Chris F.A. Johnson

I'm stumped with a case of position: absolute behaving as expected in
firefox but not in IE6. Here are links to what it looks like:

firefox: http://www.flickr.com/photos/8270250@N06/1924432229/
ie: http://www.flickr.com/photos/8270250@N06/1925262398/

And here is the html followed by the css: ....
<p>Here is some text. The quick brown fox jumped over the lazy
dog.
That sentence is famous because it has all 26 characters of the
English alphabet.</p>
Click to expand...

Where's the 's'?
body {
text-align: center;
border: 2px blue solid;
}
Click to expand...

Try adding: margin: 0; padding: 0;
 
J

Jonathan N. Little

dorayme said:
I carefully looked at the OP's text and could not see
"s/jumped/jumps/" anywhere.
Click to expand...

Seriously? It's a regular expression substitution "replace 'jumped' with
'jumps'"
 
D

dorayme

"Jonathan N. Little said:
Seriously? It's a regular expression substitution "replace 'jumped' with
'jumps'"
Click to expand...

I always take what you say seriously. So I looked again. I still
found no answer to Chris's question in the OP's post. How complex
is that post? Mind you, I was very superficial, I just looked at
the visible part (I always have trouble seeing any other).
 
M

mbstevens

Jonathan said:
Seriously? It's a regular expression substitution "replace 'jumped' with
'jumps'"
Click to expand...
Well, strictly speaking, s///; is a _Perl_ regular expression substitution.
I think the popularity of other languages has left a gap in common knowledge of
it.
 
M

mbstevens

dorayme said:
I always take what you say seriously. So I looked again. I still
found no answer to Chris's question in the OP's post. How complex
is that post? Mind you, I was very superficial, I just looked at
the visible part (I always have trouble seeing any other).
Click to expand...
He was saying that 'jumps' substituted for 'jumped' would leave a
'quick brown fox jumped...' sentence with all the letters of the alphabet.
 
R

rf

mbstevens said:
Well, strictly speaking, s///; is a _Perl_ regular expression
substitution.
I think the popularity of other languages has left a gap in common
knowledge of
it.
Click to expand...

I actually had VI (and its ilk) in mind :)
 
G

GTalbot

I'm stumped with a case of position: absolute behaving as expected in
firefox but not in IE6. Here are links to what it looks like:

firefox:http://www.flickr.com/photos/8270250@N06/1924432229/
ie:http://www.flickr.com/photos/8270250@N06/1925262398/
Click to expand...

Hello LeskaPaul,

Can you post an url? Can you give info on the height of
src="footerFake.jpg" and the height
of src="sideImgFake.GIF", etc?
Did you try to optimize the HTML/markup code? There is a lot of <div>s
in your code....
Why didn't you choose a doctype declaration? Does your code pass
validation (markup and CSS)?

Regards,

Gérard
 
D

dorayme

mbstevens said:
He was saying that 'jumps' substituted for 'jumped' would leave a
'quick brown fox jumped...' sentence with all the letters of the alphabet.
Click to expand...

mb... I know what he was *saying*. And I was saying that there
was no such mechanism mentioned in the OP's message that answered
Chris's question. If the OP's message looked like:

http://netweaver.com.au/test/pics/withGrep.png

then the position would be very different and Chris would have
twigged to it and not asked the question in the first place.

<g>
 
G

GTalbot

#outerBorderTopImage {
visibility: visible;
background-color: yellow;

}

#outerBorderBottomImage {
visibility: visible;
background-color: purple;

}

#containerWrapperOuter {
visibility: visible;
background-image: url(outerVertGrad.jpg);
width: 800px;
margin-left: auto;
margin-right: auto;

}

#containerWrapperInner {
visibility: visible;
background-image: url(vertGradient.jpg);
width: 750px;
margin-left: auto;
margin-right: auto;

}

#container {
visibility: visible;
background-image: url(contentBg.jpg);
padding: 0px;
margin: 0px;
width: 698px;
margin-left: auto;
margin-right: auto;

}
Click to expand...

leskaPaul,

The default value for visibility is visible. And I checked very
carefully all your code and not a single element has visibility:
hidden. So, why did you declare visibility: visible for those 5
elements?
Can you post that webpage of yours on an accessible web server and
then post the url?

Regards, Gérard
 
B

Ben C

I actually had VI (and its ilk) in mind :)
Click to expand...

I'm sure s/// predates Perl. It probably started in ed (or earlier)
which is how it found its way into vi. Other programs including Perl
copied it because it was what everyone was already used to.

Ticking a box marked "Use Grep" is ironic since "grep" itself is the
name of a different ed command ("global regular expression print"),
which filters rather than substitutes. It should be called "Use Regex".
 
D

dorayme

Ben C said:
Ticking a box marked "Use Grep" is ironic since "grep" itself is the
name of a different ed command ("global regular expression print"),
which filters rather than substitutes. It should be called "Use Regex".
Click to expand...

You referring to the F & R dialog box in BBEdit for Mac?

In a spiel in the supporting files with BBEdit there is a *note*
that says:

Grep is the name of a frequently used Unix command that searches
using regular expressions, the same type of search pattern used
by BBEdit. For this reason, you will often see regular
expressions called "grep patterns," as BBEdit does. They're the
same thing.
 
B

Ben C

You referring to the F & R dialog box in BBEdit for Mac?
Yes.

In a spiel in the supporting files with BBEdit there is a *note*
that says:

Grep is the name of a frequently used Unix command that searches
using regular expressions, the same type of search pattern used
by BBEdit. For this reason, you will often see regular
expressions called "grep patterns," as BBEdit does. They're the
same thing.
Click to expand...

Yes, they are the same thing, but I stand by my quibble that "Use Grep"
is a poor choice of name.

The Unix program grep is named after the ed command. What the ed command
does is print out each line of the buffer that matches the pattern. The
grep program does the same: it prints out each line of its input that
matches the pattern. That's not quite the same as Find as Replace. It's
more like Find. The thing they have in common is regular expressions, so
why not call the option that?

Another difficulty is that many of these different programs use slightly
different regular expression syntax. Does BBEdit really use grep
patterns? I think it actually uses the PCRE library (perl-compatible
regular expressions), which are not the same as either grep or egrep
patterns (although closer to egrep). This is important in the real world
because it changes what you need to escape. In a grep pattern ? matches
a ?, and \? means "0 or more". But in an egrep (or PCRE) pattern \?
matches a ? and ? means "0 or more". It's very annoying when you don't
know which you're supposed to be using.

It would be less confusing to normal people and much less confusing to
nerds just to call it "use regex".
 
D

dorayme

Ben C said:
Yes, they are the same thing, but I stand by my quibble that "Use Grep"
is a poor choice of name.
Click to expand...

O I was not meaning to dispute anything you said... I would
simply not know. (I know how to put in a set of back shocks on a
Ford XY real quick now but...)
The Unix program grep is named after the ed command. What the ed command
does is print out each line of the buffer that matches the pattern. The
grep program does the same: it prints out each line of its input that
matches the pattern. That's not quite the same as Find as Replace. It's
more like Find. The thing they have in common is regular expressions, so
why not call the option that?

Another difficulty is that many of these different programs use slightly
different regular expression syntax. Does BBEdit really use grep
patterns? I think it actually uses the PCRE library (perl-compatible
regular expressions), which are not the same as either grep or egrep
patterns (although closer to egrep). This is important in the real world
because it changes what you need to escape. In a grep pattern ? matches
a ?, and \? means "0 or more". But in an egrep (or PCRE) pattern \?
matches a ? and ? means "0 or more". It's very annoying when you don't
know which you're supposed to be using.
Click to expand...

On this reasoning, it sounds to me that BBEdit is using egrep
because I have to escape the ? to match the ?.
It would be less confusing to normal people and much less confusing to
nerds just to call it "use regex".
Click to expand...

Well, I was not confused because I am an innocent lamb and
printed out some of the documentation that came with the software
and read it lying back on the enormous bench seat of the XY after
a swim one day at Clovelly Bay. Not that I don't get confused. It
is enormous fun making patterns and watching them work on whole
folders of files. Strange but true for those with the boy in
them. <g>
 
L

leskaPaul

Hello LeskaPaul,

Can you post an url? Can you give info on the height of
src="footerFake.jpg" and the height
of src="sideImgFake.GIF", etc?
Did you try to optimize the HTML/markup code? There is a lot of <div>s
in your code....
Why didn't you choose a doctype declaration? Does your code pass
validation (markup and CSS)?

Regards,

Gérard
Click to expand...

The height and width of images (in pixels) is specified in the css
files. If you have time, copy/paste the code into your own browser(s)
and tell me if you see different.

Regards,
Paul
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to position the *tooltip* comment on these buttons? 9
Please Help? 0
Help with my responsive home page 2
Position absolute different in different browsers 9
Help with code 0
Neopets coding help 4
Need help with code on website (noob) 2
Closing an overlay outside the overlay as well 1

Members online

No members online now.
Total: 27 (members: 0, guests: 27)
Robots: 230

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,022
Latest member
MaybelleMa

Latest Threads

Top