Items not appears perfectly

Question

OsaMasw 13 Loving Helper

11 Years Ago

I have an item box to show an information for things to be sold
yesterday its was all working perfectly, but now its all missed up in Firefox
look at this pic

but in chrome

here is the html code

<div class="item" ><!-- item-->
<a href="ad.php?ad=<? echo $ad_id; ?>"><? echo $title; ?></a>
<div class="item_pic"><img class="item_pic" src="pictures/<? echo $ad_picture; ?>" width="150" height="150"/></div>
<a class="ad_catc" href="ads.php?cat=<? echo $cat; ?>"><? echo $ad_cat; ?></a>
<div class="ad_tag"><img src="img/tag.png" width="200" height="40"/> <div class="ad_price" align="center"><? echo $ad_price; ?>  <? echo $ad_cur; ?></div></div>
<div class="item_buttons" align="center"><a href="#"><img title="Delete" alt="Delete" src="img/error.png" /></a> | <a href="#"><img title="Edit" alt="Edit" src="img/edit.png" /></a> | <a href="#"><img title="Delivery" alt="Delivery" src="img/delv.png" /></a> | <a href="#"><img title="For Sell" alt="for Sell" src="img/sell.png" /></a> | <a href="#"><img title="for Buy" alt="for Buy" src="img/buy.png" /></a> |</div>
<div class="ad_info" align="center"><!-- this div dont appear in Firefox -->
<textarea dir="rtl" cols="50" rows="5"><? echo $data['ad_info']; ?></textarea>
</div>
</div><!-- end item-->

html-css php web-design

Edited 11 Years Ago by diafol because: wrong forum

7 Contributors
11 Replies
149 Views
2 Weeks Discussion Span
Latest Post 11 Years Ago Latest Post by OsaMasw

AARTI SHRIVAS 2 Posting Pro in Training

11 Years Ago

may be you have to provid a css for chrome

ajbest 0 Light Poster

11 Years Ago

Your issue might be related to them .item class not having positioning. try adding

position:relative;

to your .item

I would also consider positioning elements absolutly within the relative .item so this correction would be needed as well

.ad_info {
    position:absolute;
    bottom:230px;
}

<M/> 170 Why so serious?

11 Years Ago

Here, this may help you on working with different browsers.
http://www.catswhocode.com/blog/15-techniques-and-tools-for-cross-browser-css-coding

If it doesn't help, I will provide some clarification.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

OsaMasw 13 Loving Helper · Answer 1 · 2013-01-15T12:27:29+00:00

.item {
  background: url(../img/css-nav.gif) #fff top left repeat-x;
 background-color:#e7eefb; 
 border-radius:10px;
 height:170px;
 width:1000px;
 border:1px black;
 box-shadow:0px 1px 2px black;

}

.ad_ttl {
  position:relative;
  top:-67px;
}
.item:hover {
   background-color:#faf3bb;
}
.item_pic {
  position:relative;
  left:-200px;
  top:0px;
}

.ad_catc {
  position:relative;
  left:400px;
  bottom:130px; 
}

.ad_tag{
position:relative;
left:350px;
bottom:80px;
}

.ad_price {
position:relative;
bottom:35px;
font-size:25px;
color:white;
text-shadow:0px 1px 2px white;
}

.ad_info {
position:relative;
bottom:230px;
}

.item_buttons {
 position:relative;
  bottom:230px;
}

This is the full css for "item"

OsaMasw 13 Loving Helper · Answer 2 · 2013-01-16T06:05:44+00:00

I've changed all relative values to absolute except for .item, and now the picture disapperd, this is the first time i had a similar problem, the thing that killing me when I view source the info item is there but not showing, when I cleared all css styles still not showing on screen
dsdsds1

without any css

tesy

ecsl 0 Newbie Poster · Answer 3 · 2013-01-17T03:02:05+00:00

Do you have an HTML <!DOCTYPE> tag in you page? This can make a huge difference to how objects are positioned on screen.

Common DOCTYPE Declarations

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

I generally use HTML 4.01 doctype tags at this point in time

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Title of the document</title>
 </head>

 <body>
  Your page content goes here
 </body>     
</html>

LastMitch · Answer 4 · 2013-01-17T05:56:49+00:00

@OsaMasw

yesterday its was all working perfectly, but now its all missed up in Firefox

<textarea dir="rtl" cols="50" rows="5"><? echo $data['ad_info']; ?></textarea>

The dir="rtl" is not part of the <textarea> did you created that function?

Read this about how <textarea>:

http://www.w3schools.com/tags/tag_textarea.asp

Take out the word dir="rtl" then I think it will appear in Firefox now.

<textarea cols="50" rows="5"><? echo $data['ad_info']; ?></textarea>

You have to understand something some HTML5/CSS3 doesn't work on FireFox/IE until it's those browsers support those tags.

OsaMasw 13 Loving Helper · Answer 5 · 2013-01-17T06:38:29+00:00

@ecsl
I have <!DOCTYPE html>
then I've tried all declaration for 1.1 and 4 and still the same.
@LastMitch I've removed the "dir" attribute and the only thing that change is the direction of text.

and one more interesting thing, I've test the script on multiple PCs, and the result was not good
PC ---- Firefox ---- Chrome ---- IE
_______________________________________
PC1 ---- Not working ---- Working ---- Working
PC2 ---- Working ---- Working ---- Working

some PCs display the script correctly and others not, and all have the same versions of Browsers.
Here is a live example
http://os-share.host22.com/testshop/ads.php?cat=15&lang=en

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 6 · 2013-01-17T13:16:48+00:00

Are you sure that both PCs are running the same version of Firefox? I just test on Firefox 16, seems to be OK. Opera 12.1 displays OK as well.

OsaMasw 13 Loving Helper · Answer 7 · 2013-01-20T06:43:37+00:00

its seems that only my pc affected with this error, lets consider this question is solved .

OsaMasw 13 Loving Helper · Answer 8 · 2013-02-04T05:11:21+00:00

now I know what was the wrong ... I have adblock plus addon which was blocking some items from my page
.... this question officially closed.