Small Problems

[ballouta]

Hello

I have several problems with my site on IE8.

I will begin with this one, I am using Adobe Dreamweaver to view my pages.

I have this line of code:

<img src="images/icone2.png" border="0" align="right" class="img_contenus" alt="welcome to ICW" />

while the css for img_contenus is: .img_contenus{ padding:20px; }

 

The problem is that I see this image with the text correctly on dreamweaver and on IE6 & IE7 but it is NOT correct online on IE8.

 

Many thanks for your help

 

[attachment deleted by admin]

[Ken2k7]

In your CSS, try floating it to the right and specify the width and height to match the image's width and height.

[ballouta]

This is the new CSS but did NOT work

 

.img_contenus{

float:right;

width: 200px;

height: 194px;

padding:20px; }

[haku]

You shouldn't bother looking at your site in Dreamweaver - it's not a browser. So whatever you see in it is pointless, unless you are thinking that a significant number of people will be viewing your site through Dreamweaver.

[ballouta]

thanks for the tip.

any advise plz?

[nano]

Can you paste the code snippet of the HTML and the CSS for the relative entries.

 

This will give us a better understanding of what needs a resolution.

 

Thanks

[ballouta]

This is the HTML code:

 

<img src="images/icone2.png" border="0" align="right" class="img_contenus" />

 

The CSS:

.img_contenus{

float:right;

width: 200px;

height: 194px;

padding:20px; }

 

Thank You

[nano]

What about the container that holds the main text..

 

It would be good to see how the page has been structured with the text and the image..

[ballouta]

yes sure, the full code for the container is:

<div class="bloc_contenu_2">
    		<div class="bloc_contenus_right_top"></div>
            <div class="bloc_contenus_right_background">
            
            <div class="titre_grand_orange">
			الافتتاحية</div>
            <div class="ligne_orange"></div>
            
            <img src="images/icone2.png" border="0" align="right" class="img_contenus" />
            
            <div class="texte_contenus">
MY First Paragraph goes here<br/><br/>
My Second paragraph goes here

            </div>
            
            </div>
            <div class="bloc_contenus_right_bottom"></div>

 

 

 

And here's the CSS:

 

.texte_contenus{
color: #666666;
font-size:16px;
padding:20px;
font:Arial, Helvetica, sans-serif;

direction:rtl;
text-align:right;

}

.bloc_contenus_right_top{background-image:url(images/contenus_right_top.png); 
width:663px;
height:13px;
margin:20px 0 0 0; 
font-size:0.2em;
padding:0; }
.bloc_contenus_right_background{ background-color:#f0f0f0; 
width:663px;
margin:0; 
padding:0; }
.bloc_contenus_right_bottom{background-image:url(images/contenus_right_bottom.png); 
width:663px;
height:13px;
margin:0; 
font-size:0.2em;
padding:0; }

[nano]

ah, I wonder why IE 8 is being so difficult!

 

It is the direction:rtl; that is causing issues for IE8 but there is no reason it should.. If you float the image right etc, I can’t see why that shouldn’t work..

 

Maybe someone else knows and has experience of this behavior?

 

On another note, you might want to wrap your paragraphs in <p> tags, instead of using line breaks <br />

 

I am not too sure about this one, fixing widths or possibly look at positions..?

 

Sorry 

[nano]

Of course! How silly of me..

 

Just pop the IMG inside the texte_contenus container:

 

<div class="texte_contenus">
<img src="sealions_ultima-ball.jpg" border="0" align="right" class="img_contenus" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel arcu odio. Nunc ut diam quam. Vestibulum non mauris quam, lacinia luctus leo. Aliquam fringilla egestas fringilla. Aenean metus massa, iaculis sed consequat a, pellentesque eu sapien. Duis sed dui massa, et laoreet urna. Sed purus felis, pulvinar at egestas nec, semper in odio. Nam a mauris dui, ut consequat velit. Integer posuere, dolor non posuere pretium, sem nisl pellentesque purus, ac fringilla velit justo nec nisi. Maecenas tempus gravida mattis. Nunc ut sagittis quam. Ut sollicitudin hendrerit urna, porta consequat felis sagittis vel.</p>
<p>Curabitur sit amet odio felis, eu laoreet turpis. Morbi nec nunc eget lacus dapibus tincidunt ac quis dui. Integer ornare urna ut lacus convallis nec pulvinar leo scelerisque. Sed ornare auctor nulla, ac semper magna bibendum id. Morbi id posuere erat. Sed porttitor, lacus ac tincidunt feugiat, velit enim rutrum sapien, et porta sapien lectus at erat. Etiam vel ligula eget tortor tincidunt rutrum. Mauris accumsan arcu at elit dignissim ut porttitor risus dapibus. Etiam placerat consectetur rhoncus. Aliquam metus mauris, rutrum pellentesque condimentum ut, pulvinar id urna. Quisque imperdiet nisl eget nulla mattis vel ullamcorper lectus convallis. Ut at velit ligula. Vivamus eu eros quis lectus pulvinar tincidunt. Sed et gravida lectus.</p>
</div>

 

And make sure you float your image right:

 

.img_contenus {
float:right;
}

 

That should do the trick, silly me 

 

[ballouta]

@nano you are genius, it is working now,

 

Shall I ask another question about table problem that looks wide in IE8?

 

Thanks so much

[nano]

Sure, go for it - even though I'm not a fan of tables  :-\

[ballouta]

Hello again,

I have a while loop that displays songs in a table, this table looks fine on IE6/IE7, the problem is that each row height looks double the one that shows on IE7 IF i am viewing the page on IE8.

 

I dont mind if the best solution is to replace the table with DIV's, this problem is shown in the attached snap shot.

 

The table header is:

	<table border='0' width='530' id='table1' cellspacing='0'>
<tr>
	<td width='35' bgcolor='#36C3E0'>
	<p align='right'> </td>
	<td width='308' bgcolor='#36C3E0'>
	<p align='right'>
	<font style='font-size: 12pt; font-weight: 700' face='Arial' color='#FFE8BB'>
	Song Title</font></td>
	<td bgcolor='#36C3E0' width='49'>
	<p align='center'><span style='font-weight: 700; font-size: 12pt'>
	<font face='Arial' color='#FFE8BB'>Listen</font></span></td>
	<td width='49' bgcolor='#36C3E0'>
	<p align='center'><font face='Arial' color='#FFE8BB'>
	<span style='font-weight: 700; font-size: 12pt'>Download</span></font></td>
	<td width='80' bgcolor='#36C3E0'>
	<p align='center'><span style='font-weight: 700; font-size: 12pt'>
	<font face='Arial' color='#FFE8BB'>Ringtone</font></span></td>
</tr>

 

The Table contains a code for mootools script/multibox to open the song in a flash player, here is the table body:

 

<tr>
<td width=\"35\" bgcolor=\"#$bk\" height='30'>
<p align=\"center\">$ico</td>
<td width=\"308\" bgcolor=\"#$bk\">
<p align=\"right\">
<font color=\"#000000\" style=\"font-size: 12pt; font-weight: 700\" face=\"Arial\">$row[title]</font></td>
<td bgcolor=\"#$bk\" width=\"49\">
<p align=\"center\">

<a href=\"$cat/$row[mcode].mp3\" rel=\"\" id=\"mb8\" class=\"mb\" title=\"$row[title]\">
<img border=\"0\" src=\"../images/listen.png\" width=\"25\" height=\"25\" \"></a>
<div class=\"multiBoxDesc mb8 mbHidden\">$title</div>
</td>

<td width=\"49\" bgcolor=\"#$bk\">
<p align=\"center\">
<a href='$cat/$row[mcode].mp3'>
<img border=\"0\" src=\"../images/download.png\" width=\"25\" height=\"25\" alt=\"$fzi\"></a></td>
<td width=\"75\" bgcolor=\"#$bk\">&</td>
<p align=\"center\"><b><font face=\"Arial\" color=\"#000000\"><a target=_blank href='words.php?id=$row[mcode]'>
	<img src='../images/q_view.png' border='0' /></a></font></b></td>

</tr>

 

Thank you so much

 

[attachment deleted by admin]