DXImageTransform.Microsoft.Alpha Top is 7 pixels out

[mdew]

i've got a slight issue with an IE bug, and i'm not sure how to fix it, DXImageTransform.Microsoft.Alpha( style=0,opacity=40,finishOpacity=40,startX=40,finishX=40,startY=40,finishY=40); LEFT: 22px; WIDTH: 43px; POSITION: absolute; TOP: 340px; HEIGHT: 50px; -moz-opacity: 0.40", it seems the "TOP:" is always 7 pixels out vs the mozilla way, anyway around this?

hmmm i wonder if i could set a variable, of brower=mozilla, let variable=-7 (else variable=0) and then add varable to TOP=340+variable

any ideas or examples would be handy.

[thewedding]

i've got a slight issue with an IE bug, and i'm not sure how to fix it, DXImageTransform.Microsoft.Alpha( style=0,opacity=40,finishOpacity=40,startX=40,finishX=40,startY=40,finishY=40); LEFT: 22px; WIDTH: 43px; POSITION: absolute; TOP: 340px; HEIGHT: 50px; -moz-opacity: 0.40", it seems the "TOP:" is always 7 pixels out vs the mozilla way, anyway around this?

hmmm i wonder if i could set a variable, of brower=mozilla, let variable=-7 (else variable=0) and then add varable to TOP=340+variable

any ideas or examples would be handy.

as css does not know any if else statements you can use a look-a-like box model hack.

in your case:

Code: Select all

body> #nameofID {
top: 347px;
}
#nameofID {
_top:340px;
}


explanation:

as IE does not read through the > sign this line and is only read by mozilla
and as mozilla can not read beyond the _ sign this is only read by IE.

so there you have your if else workaround

[slug]

please keep in mind that while certain CSS tricks and hacks might work in your browser, they might not be standard CSS and might not be supported by many people's browsers.

many microsoft css tricks are not supported by other browsers and will not be shown or possibly break the page completely.

if you're interested in creating a standards compliant stylesheet that will be supported by most browsers, take a look at a CSS validator such as the one at http://jigsaw.w3.org/css-validator/

W3.org is the organization who publishes various standards such as HTML and CSS.

-slug

[thewedding]

please keep in mind that while certain CSS tricks and hacks might work in your browser, they might not be standard CSS and might not be supported by many people's browsers.

many microsoft css tricks are not supported by other browsers and will not be shown or possibly break the page completely.

if you're interested in creating a standards compliant stylesheet that will be supported by most browsers, take a look at a CSS validator such as the one at http://jigsaw.w3.org/css-validator/

W3.org is the organization who publishes various standards such as HTML and CSS.

-slug

indeed hacks are not the best way to go but ...

it would be nice if pbase would make its html code w3c compliant so that ppl do not have to use these hacks to compensate for the many (nested) tables and redundant class tags and multiple ID's ... as stylesheets are ment to be cascading

I use the validator on a daily bases at work but this combo will only result in clean code when used with valid xhtml code... as your css may validate (thats the easy part) it would stil not make your pbase site look the way you wanted it to look...

[slug]

agreed. the current state of the HTML is poor.

will be working on a complete redesign in the near months.

i'm far from an expert on CSS.

i've been experimenting with divs while working on the new comment system which is being used in the camera database.

any feedback on the HTML of the comment section of http://www.pbase.com/cameras/nikon/d70 would be welcome.
the comment section is what is inside of

Code: Select all

<div id="comdisplay">

when i have a rough version of a new image and gallery page, i'll put them up for review in case anyone will have suggestions.


thanks,
-slug[/code]

[alangrant]

Slug,

I just had a quick look, certainly looks like a step in the right direction.

One small point: I noticed you have elements with class "head" and "body". I wonder if it might be better to avoid using names that are the same as HTML tags. Not that it is technically wrong, but I can see people getting confused between body {} and .body {} in their stylesheets.

[slug]

probably a good point.
i was going towards shortness while still being readable.

shortness is good because if you can save even 3 bytes, 10 times per page, that's 30bytes per page * 4million pages/day * 30days/month = 3.6GB per month. no big deal but it all adds up for performance and cost reasons.

in this case it's probably better to call it something like comhead and combody simply for clarity as there might be other head and body classes in the future.

thanks for checking out the page.
i'm gradually learning css/html concepts but don't have a lot of real design experience to know what might be trouble.

-slug

[thewedding]

for review in case anyone will have suggestions.
thanks,
-slug[/code]

Slug, well I've go some sugestions...

Code: Select all


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xml:lang="en">
<head>
   <title></title>
   <style type="text/css">
   <!--
   body{
      font: 76%/1.5em Arial, Helvetica, sans-serif;
   }
   #comments /*div*/{
      border: #7777BB 1px solid;
      margin: 0px 0px 4px 0px;
   }
   #comments h2{
      background: #7777BB;
      color: #FFFFFF;
      padding: 10px 0px 10px 10px;
      margin: 0;
      font-size: 130%;
   }
   #comments span{
      width: 100%;
      display: block;
      height: 1.6em;
      background: #F0F0F0;
   }
   #comments b{
      margin: 0px 0px 0px 10px;
      padding: 0;
      float: left;
   }
   #comments em{
      margin: 0px 10px 0px 0px;
      padding: 0;
      float: right;
   }
   #comments p{
      margin: 10px;
   }
   #comments a{
      color: #7777BB;
      margin: 0px 0px 0px 10px;
      text-decoration: none;
   }
   #comments a:hover{
      color: #242468;
      margin: 0px 0px 0px 10px;
      text-decoration: none;
   }
   -->
   </style>
</head>

<body>

<div id="comments">

<h2>Random Samples from 124605 available Photos</h2>

   <div>
      <span><b>from:<a href="">John Doe</a></b><em>— date: 21/09/04</em></span>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse viverra, turpis non scelerisque feugiat, dolor dolor interdum arcu, a scelerisque lectus elit sit amet tortor. Etiam arcu eros, molestie nec, molestie eu, laoreet eu, tellus. Phasellus consectetuer ante vitae dolor. Aliquam quis sapien nec elit volutpat faucibus. Ut vel erat. Sed enim ipsum, rutrum at, bibendum et, pharetra non, libero. Ut eget nisl. In sit amet arcu. Curabitur suscipit, tellus a porttitor pharetra, arcu urna nonummy elit, nec pellentesque nisl purus sed lectus. Curabitur commodo, orci quis lobortis facilisis, leo arcu placerat est, in convallis dui wisi quis wisi. Pellentesque enim. In vehicula ligula eu erat. Vivamus ut pede vel sem pulvinar vestibulum. Etiam ac ipsum non magna blandit tempor. Pellentesque eros erat, blandit id, egestas at, congue non, justo. Suspendisse sagittis, pede vitae lacinia luctus, lorem augue laoreet purus, vel dapibus tortor elit in diam. Nulla volutpat enim tristique enim. Nunc fringilla malesuada dolor.</p>
   </div>

   <div>
      <span><b>from:<a href="">John Doe</a></b><em>— date: 21/09/04</em></span>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse viverra, turpis non scelerisque feugiat, dolor dolor interdum arcu, a scelerisque lectus elit sit amet tortor. Etiam arcu eros, molestie nec, molestie eu, laoreet eu, tellus. Phasellus consectetuer ante vitae dolor. Aliquam quis sapien nec elit volutpat faucibus. Ut vel erat. Sed enim ipsum, rutrum at, bibendum et, pharetra non, libero. Ut eget nisl. In sit amet arcu. Curabitur suscipit, tellus a porttitor pharetra, arcu urna nonummy elit, nec pellentesque nisl purus sed lectus. Curabitur commodo, orci quis lobortis facilisis, leo arcu placerat est, in convallis dui wisi quis wisi. Pellentesque enim. In vehicula ligula eu erat. Vivamus ut pede vel sem pulvinar vestibulum. Etiam ac ipsum non magna blandit tempor. Pellentesque eros erat, blandit id, egestas at, congue non, justo. Suspendisse sagittis, pede vitae lacinia luctus, lorem augue laoreet purus, vel dapibus tortor elit in diam. Nulla volutpat enim tristique enim. Nunc fringilla malesuada dolor.</p>
   </div>
   
   <div>
      <span><b>from:<a href="">John Doe</a></b><em>— date: 21/09/04</em></span>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse viverra, turpis non scelerisque feugiat, dolor dolor interdum arcu, a scelerisque lectus elit sit amet tortor. Etiam arcu eros, molestie nec, molestie eu, laoreet eu, tellus. Phasellus consectetuer ante vitae dolor. Aliquam quis sapien nec elit volutpat faucibus. Ut vel erat. Sed enim ipsum, rutrum at, bibendum et, pharetra non, libero. Ut eget nisl. In sit amet arcu. Curabitur suscipit, tellus a porttitor pharetra, arcu urna nonummy elit, nec pellentesque nisl purus sed lectus. Curabitur commodo, orci quis lobortis facilisis, leo arcu placerat est, in convallis dui wisi quis wisi. Pellentesque enim. In vehicula ligula eu erat. Vivamus ut pede vel sem pulvinar vestibulum. Etiam ac ipsum non magna blandit tempor. Pellentesque eros erat, blandit id, egestas at, congue non, justo. Suspendisse sagittis, pede vitae lacinia luctus, lorem augue laoreet purus, vel dapibus tortor elit in diam. Nulla volutpat enim tristique enim. Nunc fringilla malesuada dolor.</p>
   </div>
   
</div>


</body>
</html>



explanation:

this way the code is cascading in a xhtml way, you only need one ID tag "comments" to set all nested items.. the main rule in building valid code is keeping it plain and simple and use html 1 tags and style those to your likings this way (you can test by removing the css) the code will still be well formated , imagine xhtml on a next gen mobile phone etc etc...

but as you can see, you it's sometimes better to use margin instead of padding since ie 5.5 does not interperd these verry well. etc etc one can write a book about that .. hahaha zeldman.com

I used % font sizes for accessibility and usability, you can easily test this: press and hold left ctrl key and use your mouse scrollwheel (shorthand for chosing font size)

hope it helps..

I will make a gallery template for you the next week to help you get started.

regards

ps: about those ms tricks here is the list for mozilla... it just depends on how you want to see the world I guess...

-moz-first-node
-moz-last-node
-moz-margin-start
-moz-margin-end
-moz-opacity
-moz-box-sizing
-moz-box-orient
-moz-counter-reset
-moz-user-focus
-moz-float-edge
-moz-binding
-moz-outline

etc etc ...

ps2: I'm a great fan of mozilla don't get me wrong

[thewedding]

or even leave out the div tags if you do not want the comments to be in a seperate box with it's own border... to save some bits

Code: Select all


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xml:lang="en">
<head>
   <title></title>
   <style type="text/css">
   <!--
   body{
      font: 76%/1.5em Arial, Helvetica, sans-serif;
   }
   #comments{
      border: #7777BB 1px solid;
   }
   #comments h2{
      background: #7777BB;
      color: #FFFFFF;
      padding: 10px 0px 10px 10px;
      margin: 0;
      font-size: 130%;
   }
   #comments span{
      width: 100%;
      display: block;
      height: 1.6em;
      background: #F0F0F0;
   }
   #comments b{
      margin: 0px 0px 0px 10px;
      padding: 0;
      float: left;
   }
   #comments em{
      margin: 0px 10px 0px 0px;
      padding: 0;
      float: right;
   }
   #comments p{
      margin: 10px;
   }
   #comments a{
      color: #7777BB;
      margin: 0px 0px 0px 10px;
      text-decoration: none;
   }
   #comments a:hover{
      color: #242468;
      margin: 0px 0px 0px 10px;
      text-decoration: none;
   }
   -->
   </style>
</head>

<body>

<div id="comments">

   <h2>Random Samples from 124605 available Photos</h2>

      <span><b>from:<a href="">John Doe</a></b><em>— date: 21/09/04</em></span>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse viverra, turpis non scelerisque feugiat, dolor dolor interdum arcu, a scelerisque lectus elit sit amet tortor. , vel dapibus tortor elit in diam.</p>

      <span><b>from:<a href="">John Doe</a></b><em>— date: 21/09/04</em></span>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse viverra, turpis non scelerisque feugiat, dolor dolor interdum arcu, a scelerisque lectus elit sit amet tortor. , vel dapibus tortor elit in diam.</p>
      
      <span><b>from:<a href="">John Doe</a></b><em>— date: 21/09/04</em></span>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse viverra, turpis non scelerisque feugiat, dolor dolor interdum arcu, a scelerisque lectus elit sit amet tortor. , vel dapibus tortor elit in diam.</p>
      
      <span><b>from:<a href="">John Doe</a></b><em>— date: 21/09/04</em></span>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse viverra, turpis non scelerisque feugiat, dolor dolor interdum arcu, a scelerisque lectus elit sit amet tortor. , vel dapibus tortor elit in diam.</p>

</div>

</body>
</html>