|
|
Posted by Gιrard Talbot on 04/17/07 23:43
Luis Farzati wrote :
> Hi,
>
> I have a tiny bug in the following code.
Can you upload your code on an web-accessible webpage?
Have you validated your markup and CSS code? Are you using valid code?
> FF1.5 renders it right, but
> IE7 doesn't.
What's "right" then? Please describe what is the "right" layout, your
page layout goal. Viewers can not in advance determine what is the right
intended layout in your mind.
> To see the issue, please check out with both browsers
According to this page
http://www.mozilla.com/en-US/firefox/all.html
Firefox version 1.5 "will be supported until April 24, 2007 with
security and stability updates."
A lot of us are using Firefox 2.0.0.3. So, is it worth it to test with a
browser version no longer recommendable and no longer widely in use on
the web? Why not test with the latest stable available Firefox version?
the
> DIV containing the field "Apellido", to which I'm applying a
> float:left.
>
> I've first tried applying a display:inline to the DIV, because it made
> more sense for me, but didn't work. So I've tried float: left and now
> I got it working partially.
>
Can you describe what you are trying to do exactly, webpage design
requirements, purpose of webpage, intended layout, etc? If you just want
to discuss code, then we can't really help you. Adding more code is most
probably the wrong approach.
> I'd appreciate any tip you can give me. Thanks!!
>
> Luis
>
>
> <!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">
> <head>
> <title>User lfarzati</title>
> <style>
> .userInfo
> {
> border-right: 1px dashed #888;
> padding-right: 8px;
> width: 170px;
> }
>
> ul
> {
> list-style-type: none;
> margin-left: 0;
> padding-left: 0;
> }
>
> li
> {
> font-family: Tahoma, Arial, Helvetica, sans-serif;
> font-size: 8pt;
Why "pt" ? And why so small? Is your webpage intended for printing only?
Did you know that for most people over 40 years old, 8pt on a monitor
screen is very small... for screen and for printing as well.
As coded, your code is for screen and print.
"Do not specify the font-size in pt, or other absolute length units for
screen stylesheets. They render inconsistently across platforms and
can't be resized by the User Agent (e.g browser). Keep the usage of such
units for styling on media with fixed and known physical properties (e.g
print).
Use relative length units such as percent or (better) em (...)"
W3C Quality Assurance tip for webmasters:
Care With Font Size
Units: avoid absolute length units for screen display
http://www.w3.org/QA/Tips/font-size
> margin-bottom: 6px;
> }
>
> .label
> {
> display: block;
> border-bottom: 1px solid #ddd;
> }
>
> .value
> {
> font-weight: bold;
> }
>
> .surname
> {
> float: left;
> margin-right: 12px;
> }
> </style>
> </head>
> <body>
> <div class="userInfo">
> <ul>
> <li>
> <div><span class="label">Identificador</span><span
> class="value">kate</span></div>
> </li>
You've got right here 5 nesting levels of DOM nodes, a lot of markup and
class definitions for what seems to be a rather small amount of
text/info to render. There is such a thing as over-coding,
over-declaring, over-defining and over-excessively constraining and that
is what I think you're doing here.
> <li>
> <div class="surname">
<span class="label">Apellido</
> span><span class="value">Austen</span></div>
> <div class="name">
Where is the "name" class definition in your code?
<span class="label">Nombre</
> span><span class="value">Kate</span></div>
> </li>
> </ul>
> </div>
> </body>
> </html>
Can you post an url?
GΓ©rard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
[Back to original message]
|