PDA

View Full Version : IE and FF OK, chrome not



BubikolRamios
Feb 18th, 2010, 03:46 PM
test link:http://agrozoo.net/test.html

real link:
http://agrozoo.net/jsp/Galery_one_image.jsp?id_galery=e1269064ba04462ab64dbe031c464c5d
in chrome you see how cc_by_sa image gets pushed out of big image to the left.

Ok this should be images, but for demo will do. IE,FF "images" are where needed to be, at chrome does not. ?



<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8" />
<title></title>

</head>
<body>
<div style = 'text-align:center;'>
<a style ="position:absolute;padding-top:12px;padding-left:12px;" href ="#" title ="title">
<span>imageA</span>
</a>
<span>imageB</span>
</div>

<!--ignore that it is for syntax checking-->
<div id = "validation_div" >
<div style = 'float:right;'>
<a href="http://www.totalvalidator.com/validator/Revalidate?revalidate=true&amp;dtd=dtds/1.0/xhtml1-transitional.dtd">
<img
src=""
alt="Totally Valid XHTML 1.0" />
</a>
<a href="http://validator.w3.org/check?uri=referer">
<img
src=""
title = "Valid XHTML 1.0 Transitional"
alt="XHTML" />
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer ">
<img
src=""
title = "Valid CSS!"
alt="CSS" />
</a>
</div>
</div>
</body>
</html>

abduraooft
Feb 18th, 2010, 03:53 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> That's an incomplete DOCTYPE. Try setting
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> instead.

BubikolRamios
Feb 18th, 2010, 04:05 PM
On test link was ok, all checked, updated code above, chrome shows thing differently.

abduraooft
Feb 18th, 2010, 04:19 PM
If the width of that image is fixed, then you could set the following CSS properties to that container(of that image) <div>


margin: 0 auto;
position:relative;
width:800px;
text-align:center;


PS: I'd recommend to add a class or id and apply the styles in CSS file, rather than using inline styles.

BubikolRamios
Feb 18th, 2010, 07:50 PM
Editing replay .... :



<div style = 'text-align:center;'>
<a style ="position:relative;" rel ="nofollow" href ="<%=(sessionGalery.license_link==null)?"#":sessionGalery.license_link%>" title ="<%=sessionGalery.license_text%>">
<img id ="imgTag" src='<%=sessionGalery.big_img%>' alt = '' style = 'border:5px solid #FFFFE0;margin:5px;width:<%=sessionGalery.width_px%>px;height:<%=sessionGalery.height_px%>px;' />
<img style ="position:absolute;left:0px;padding-top:12px;padding-left:12px;" src ="<%=sessionGalery.license_logo%>" alt ="" />
</a>
</div>

BubikolRamios
Feb 18th, 2010, 07:52 PM
now it works.

old


<div style='text-align:center;clear:left;'>
<a>
<img style= "position:absolute;padding-top:12px;padding-left:12px;" />
</a>
<img style= 'border:5px solid #FFFFE0;margin:5px;width:800px;height:600px;' />
</div>


new


<div style = 'text-align:center;'>
<span style ="position:relative;">
<img style = 'border:5px solid #FFFFE0;margin:5px;width:450px;height:600px;' />
<a>
<img style ="position:absolute;left:0px;padding-top:12px;padding-left:12px;" />
</a>
</span>
</div>

BubikolRamios
Feb 18th, 2010, 09:01 PM
another thing popped up in FF, open this:
http://agrozoo.net/jsp/Galery_one_image.jsp?id_galery=4df6354561d24ddd98e69c3c18e4e378

you will see cc_by_sa image on left center side of big image(that is wrong)
click refresh
and it moves to right spot. How can that happen ?

No such thing in IE and Chrome. Looks to me , it happens when something is pulled from cache.

harrierdh
Feb 18th, 2010, 09:14 PM
You need to specify where it should go. You are getting random behavior. Specify top: 0px.

<img alt="" src="../img/licenses/cc_by_sa.jpg" style="position: absolute; left: 0px; top: 0px; padding-top: 12px; padding-left: 12px;"/>

BubikolRamios
Feb 18th, 2010, 09:30 PM
if I go with top:0px; then it is wrong in all browsers and even refresh does not set it where it should be.
And cant be randome, you can click 100 x refresh and it will be always at top.
Tryed to move all css to external css, taht did no help either.