IE and Moz - please help!

[Duane Lambe]

I'll start out by saying that I've been looking for a definitive
answer for a few hours now, and need opinions on this one.

I have a site I've been starting for our internal helpdesk joint.
Copy's up at http://mageware.org:8080/ ; files are index.asp and
index.css .

If you render it both in IE and Moz, you'll pretty much see the
problem. I've been reading a few things on DTDs, which one's compliant
and which one isn't, compliance mode not being init'd properly in IE
using XHTML DTDs... I really just need to know what I generally have
to do to get this site to look like it does in IE, in /both/ IE and
Moz. I don't mind redefining where stuff is on the page or anything -
the site itself only took a little while to set up (and a lifetime of
compliance testing, it seems), but it's pretty much all I need for a
small internal helpdesk site.

The CSS isn't cleaned up very much - I've been trying different tags
and display settings, among other things.

Thanks for any info in advance - I'd really appreciate it.

--
Duane Lambe

[Duane Lambe]

And of course, my ISP reset my IP. :P

*sigh* ... having a rough day, I am. :)

Please, in reference to the question, try http://65.50.52.13:8080

[William Tasso]

Duane Lambe wrote:

I'll start out by saying that I've been looking for a definitive
answer for a few hours now, and need opinions on this one.

I have a site I've been starting for our internal helpdesk joint.
Copy's up at http://mageware.org:8080/ ; files are index.asp and
index.css .

If you render it both in IE and Moz, you'll pretty much see the
problem.

Then we need a third opinion - Opera agrees pretty much with Mozilla,
greatly increasing (IMNSHO) the probability that IE has got it wrong.

You're right there is way too much in the css. tidy it up so you can see
the wood for the trees. the absolute positioning has gotta be a bugger to
maintain.

perhaps you could relax your design - let it flow and stop worrying.

--
William Tasso - http://WilliamTasso.com

[Mikko Rantalainen]

Duane Lambe / 2003-10-28 01:49:

If you render it both in IE and Moz, you'll pretty much see the
problem. Please, in reference to the question, try http://65.50.52.13:8080

Please, give us a screenshots of the problem in the future with
highlighting of every place you think is incorrect. Not all of us
have MSIE to test but we could give a hint to fix the problem
without using the broken browser if we see how it renders the page.

The problem seems to be that you're using absolute positioning
without specifying the position of every element and simply
expecting them to come in some special locations.

For example, you have no 'top', 'left', 'right' or 'bottom' defined
for #titlebox but you still have "position: absolute". As a result,
the #titlebox is absolutely positioned relative to default html and
body margin and padding. The default values for those will differ in
every browser.

Also, you have selectors like ".form_style_cursorhand.hover" where
the ".hover" part is probably a typo and you really mean ":hover"
instead. The bigger problem is, IMO, that the class name is really
badly selected. The class name should label the meaning of part of
the document, not the rendering.

You should really use cascading to get rid of unnecassary repeating
repeating repeating of the same CSS declarations.

--
Mikko

[Duane Lambe]

>Please, give us a screenshots of the problem in the future with

highlighting of every place you think is incorrect. Not all of us
have MSIE to test but we could give a hint to fix the problem
without using the broken browser if we see how it renders the page.
Ah, my fault, sorry bout that - wasn't sure if this was a
sshot-friendly group, and I was pressed for time (what else is new?).
The problem seems to be that you're using absolute positioning
without specifying the position of every element and simply
expecting them to come in some special locations.

For example, you have no 'top', 'left', 'right' or 'bottom' defined
for #titlebox but you still have "position: absolute". As a result,
the #titlebox is absolutely positioned relative to default html and
body margin and padding. The default values for those will differ in
every browser.
That was exactly it - I am a dolt. :) Thanks very much for that... I
wasn't aware - but I'm not surprised - that browsers had different
margin settings... actually, it seems that IE is the different one,
compared to at least Moz, and I assume Opera, as per another post.
Also, you have selectors like ".form_style_cursorhand.hover" where
the ".hover" part is probably a typo and you really mean ":hover"
instead. The bigger problem is, IMO, that the class name is really
badly selected. The class name should label the meaning of part of
the document, not the rendering.
You sir, are a saint. :) I missed that one totally, and I'm renaming
the class (it was from a tutorial online, a pure copy/paste - I'm no
CSS god, as you can tell :).
You should really use cascading to get rid of unnecassary repeating
repeating repeating of the same CSS declarations.

I've tried a few things in the CSS file to consolidate the more common
elements into a "catch-all", but it never worked for me. Would you
have a link that I could read, that shows a quick example? I'm sure I
just don't understand the syntax. The buttons especially share tons of
the same stuff, and I'd love to clean that up.

[Duane Lambe]

>> If you render it both in IE and Moz, you'll pretty much see the

problem.
Then we need a third opinion - Opera agrees pretty much with Mozilla,
greatly increasing (IMNSHO) the probability that IE has got it wrong.

Noted, and should be fixed now by setting the absolute positioning for
all elements (though I haven't updated the link provided; that was off
my home box, and this is an internal site for work).
You're right there is way too much in the css. tidy it up so you can see
the wood for the trees. the absolute positioning has gotta be a bugger to
maintain.

perhaps you could relax your design - let it flow and stop worrying.

I really don't mind the absolute stuff, actually. I wanted the page to
look the same in both IE and Moz, so I used absolutes, and px font
sizes (font and window resizing are other hurdles I have yet to find
an elegant solution for).

I intend for the page, once completed, to serve as a template in DW,
so I can dump the current helpdesk content into it, and be done with
it.

[Mikko Rantalainen]

Duane Lambe / 2003-10-28 16:44:

Please, give us a screenshots of the problem in the future with
highlighting of every place you think is incorrect. Not all of us
Ah, my fault, sorry bout that - wasn't sure if this was a
sshot-friendly group, and I was pressed for time (what else is new?).

I'm not sure if you understood correctly. You should NOT post any
attachments to this newsgroup, but you should save screenshots of
the page next to the page and provide URLs.
That was exactly it - I am a dolt. :) Thanks very much for that... I
wasn't aware - but I'm not surprised - that browsers had different
margin settings... actually, it seems that IE is the different one,
compared to at least Moz, and I assume Opera, as per another post.

The interesting part is that some browsers use padding instead of
margin for indenting body text by default. That's why you always
have to define both for html and body elements.

You should really use cascading to get rid of unnecassary repeating
repeating repeating of the same CSS declarations.

I've tried a few things in the CSS file to consolidate the more common
elements into a "catch-all", but it never worked for me. Would you
have a link that I could read, that shows a quick example? I'm sure I
just don't understand the syntax. The buttons especially share tons of
the same stuff, and I'd love to clean that up.

I don't have any such links at hand, but I'll wrap an example:

You have stuff like:

..button01 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
color: #000000;
font-variant: normal;
text-align: center;
cursor: pointer;
position: absolute;
background-color: #B9C8D2;
top: 50px;
left: 10px;
width: 120px;
text-decoration: none;
height: 15px;
border-top: 1px #00557D;
border-right: 1px #00557D;
border-bottom: 1px solid #00557D;
border-left: 1px solid #00557D;
}
..button01:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
color: #FFFFFF;
font-variant: normal;
text-align: center;
cursor: pointer;
position: absolute;
background-color: #00557D;
top: 50px;
left: 10px;
width: 120px;
text-decoration: none;
height: 15px;
border-top: 1px #00557D;
border-right: 1px #00557D;
border-bottom: 1px solid #00557D;
border-left: 1px solid #00557D;
}

.....
.....

for many different button styles. Instead you should merge the
selectors and use cascading and allow default values to inherit like
this:

html {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1em;
}

..button01,
..button02,
..button03,
..button04,
..button05,
..button06 {
color: #000000;
text-align: center;
cursor: pointer;
background-color: #B9C8D2;
text-decoration: none;
height: 15px;
line-height: 15px;
border: solid 1px #00557D;

position: absolute;
top: 50px;
}
..button01 { left: 10px; }
..button02 { left: 131px; }
..button03 { left: 252px; }
.....

..button01:hover,
..button02:hover,
..button03:hover,
..button04:hover,
..button05:hover,
..button06:hover {
background-color: #00557D;
}

The idea is to define font related stuff only in the root element
(html) and let the setting inherit to other elements. Then you
define all common settings for all buttons with a single rule block
where you just write all the selectors separated with comma. Then
you list the exceptions. The better selector you use, the less you
have to write.

But you should really fix the markup first. http://validator.w3.org/
helps.

For example, I'd suggest using markup like

....
<div class="buttons">
<a href="xxx" id="b1">link 1 label</a>
<a href="yyy" id="b2">link 2 label</a>
</div>

(note that id values must be unique!) combined with style like

div.buttons a {
... /* all styles that apply to all buttons */
}
#b1 {
... /* exceptions for button 1 */
}
#b2 {
... /* exceptions for button 2 */
}

etc etc.

It's not that hard. If this all sounds unclear, then I'd suggest
reading the CSS selectors spec at http://www.w3.org/TR/css3-selectors/

--
Mikko