A CSS error or IE bug?

[Zoomer]

Thanks for taking the time.
Sorry for blanking out the name, but you'll be seeing it real soon anyway.

On Opera, the slices are aligned nicely.

However, on MS's IE6:

The images on the right are misaligned horribly. Same with mozilla 1.2.1.

I used Photoshop (ImageReady Save for Web) to generate CSS (classes) code. Unfortunately, I'm a poor coder, so I can't really see if there is a problem there.

I'd really appriciate it if someone helps me on this.

The code is attached as a text file.

Thanks!

 

[Ryders]

To be honnest, I never used ImageReady... but I'm a coder and I dislike the code you posted... I would feel scared to use the on my site...! (don't ask why!)

But I have already splitted an image to fit into tab cells... check h**p://www.centredubicycle.com with opera (I was asked to be ie55 compliant only, so, haven't even checked it!).. if it comes out great.. that I should be able to help!


Basically, few steps...
**slice the image how you want it
**add classes to your stylesheet which have a background-image property [-code-] background-image: url(../img/bg.gif); [-/code-]
(you should have on class per slice)
**finally the <tr> tag becomes <tr class="class-name-you-used">

anyways... all this is kinda fast... if you can't figure a thing.. lemme know.. I should find a minute for you!

l8r

ryd

 

[Zoomer]

Well, I'd expect auto generated code to be bad. But they should be workable, right?

I made it generate in table form and it worked. But of course, CSS is more elegant and has more control.

I'll ask for you to help me once I'm done with this. Unfortunately, I'm working on a rather tight deadline.

By the way, I am not selling this design. Its too horrible. :D

 

[Ryders]

Well, I'd expect auto generated code to be bad. But they should be workable, right?

Yep.. u got a point on that... but the thing is not every browsers support every html tags. Sure I'd expect ie6 to be fine and opera not to.. but anyways.

I made it generate in table form and it worked. But of course, CSS is more elegant and has more control.

I wouldn't say more 'elegant'... result is quite the same to the user, but the stylesheet generated (the one u attached) has <DIV>'s tags and these may not be supported the same way by every browsers (just iFrame, it's an ie55 thing).

I'll ask for you to help me once I'm done with this. Unfortunately, I'm working on a rather tight deadline.

I got no problem w/ that! the only thing is that I get my internet disconnected by tomorro (Dec 9th) as I'm moving outta here on the 20th. I still got an internet access from the University, but I'm into my final exams this week and the next. (when is that thing due?) but I'd surely find you an hour or so...!

By the way, I am not selling this design. Its too horrible

Oh... okay! eheheh!!! u do whatever u want with it! :P as long as u learn something.. I'll be more than happy!! :P



and... finally... to answer u'r question... CSS error or ie6 bug... I'd say it simply is a different interpretation of css/div's by browsers..

l8r

ryd




[edit]

Oh.. btw, have a look at this...

As generated by ImageReady and attached...

DIV.Page-Template-21 {
position:absolute;
left:752px;
top:98px;
width:48px;
height:1px;
}

DIV.Page-Template-22 {
position:absolute;
left:138px;
top:99px;
width:605px;
height:12px;
}

Template-21 is a 1px slice of the image.... and Template-22 is the next div right under 21 (which causes problem in ie6, I tested it..., but don't ask y!)

if you'd just change the 'top:99px;' by 'top:99px;' in Template-22.. see what it gives... if you don't need this 1px slice.. it may be how you'll quicky solve your problem..

I feel like a programmer at Microsoft, fixing things and not resolving problems... but anyways..!! :p

ttyl!
[/edit]

 

[Zoomer]

Hi,
thanks for taking the time to explain it to me.

I'd prefer not to eat into your time, which could be better spent studying for your exams! Don't worry about me, I can wait until your finals are over. This isn't urgent, I can live with tables.
Anyway, the funny thing is that it works on opera but not on m$'s bloatware. Guess opera claims that it is more compatible, etc is true then.

 

[Ryders]

heheheeheh!!! M$ isn't 'less' compatible... it simply defines it's own compatibility standards... regardless of everyone else's!..!!

If all that can wait untill Christmass.. I'd be glad to give u a hand (I'll be back to my mom's place.. so.. more free time expected!!! eheehhheh!!!)


allright then.. I'm out to my math...!! :P

ttyl


[edit]
btw... ryders2005(at)msn(dot)com ... my msn messenger handle !
[/edit]

 

[DarkDevil]

I'm not sure what your problem is, besides letting ImageReady do your css (if i got you right). What i would do is use Photoshop to create your images, and use TopStyle Pro (get it at download.com) for your CSS needs. If your trying to make a interactive menu (moving stuff, etc), then your best off using Macromedia Fireworks, but if its just the misaligned stuff then use Photoshop, TopStyle, and if your not so good with html try the html editor that comes with CuteFTP

 

[Andre]

I really don't know what to say in this case. However let me only say that your problem is VERY strange and RARE.

Normally ImageReady slices should work perfectly on IE, plus IE 6....

In my opinion you probably have changed it or done something you shouldn't.

Use Dreamweaver MX or TopStyle for CSS, it is the most efficient way to generate good CSS code. We cannot say that Dreamweaver sucks on this task, because 99% of the times it generates PERFECT code, and you can try to validate it on w3.com. However in HTML it does not work that good lol.

I wasn't aware that ImageReady could be use for that too.

But HOLY !!!

Advice : Learn to use Dreamweaver or something similar. I hate to see 7238937289237 layers on a single page. You will get better results if you just use tables/cells for it.

-Andre

 

[Zoomer]

Thanks to all I havew replied.

I have since reworked the page to use tables instead. Not very elegant, but at least its compatible.

However, there is still a teething problem. If you go to this page: http://www.reverac.com/plan_details.htm and (in IE) jack up the font size, my header breaks up.

This will happen if I use a table in the body that too wide.

Any suggestions?

 

[deadserious]

Maybe if you add something like this to your style sheet it will keep it from breaking up.

BODY {
font-size: 12px;
}

td {
font-size: 12px;
}

 

[Ryders]

hey...!! just wanted to let u know I tried it in ie5.5 and worked fine (even when changing the text size....) and... also works great with ExplorerX (from OfficeX usin MacOSX)..... again... just to let ya know! :P

 

[deadserious]

Ohhh.... looks you got it fixed.

What did you end up having to do to fix it?