i made this simple buttons in Arabic Language (right to left language) and it works fine with all browsers except Opera, it looks flipped!
this is the code: http://jsfiddle.net/gtd52/1/
<p style="text-align:center;">
<a class="download_button1" href="#">رابط التحميل</a>
<a class="download_button1" href="#">رابط التحميل</a>
<a class="download_button1" href="#">رابط التحميل</a>
<a class="download_button1" href="#">رابط التحميل</a>
</p>
and it appears in opera like this: http://i.stack.imgur.com/13qyK.png
so.. what can i do to correct it?
Using your original fiddle, just add display:inline-block; to .download_button1 and it will work as expected. see results on browserstack
Rewrite the first line as follows:
<p style="text-align:center;" dir="rtl">
and it should work.
Related
I’m making a website that has a title with differently colored words and fonts. To do this, I’ve put each word in a different div id to change the text color. I’m not sure if there is a better way than this…
Anyway, the first half of the title (the colored part) is lower than the rest of the title. It shows up this way on Firefox and Chrome, but on Internet Explorer it looks just fine. I’m not sure why there is a difference, I’ve tried out different fonts, which sometimes lessens the problem, but never completely eliminates it. Of course, when I add padding to make it line up, it messes it up on Internet Explorer.
Here’s the link for the page: http://www.dinneronthespot.com/index2.html
The solution is, use span
<span id="dotPerfect">
<span id="color1">Dinner </span>
<span id="color2">On The </span>
<span id="color3">Spot </span>
</span >
<span id="dotPersonal">Personal Meal Service is perfect for...</span>
try this:
#topText > h1 > div {
display: inline;
}
add this code in the stylesheet
Use span instead of div for this kind of actions.
<h1>
<span id="color1">Dinner </span><span id="color2">On The </span><span id="color3">Spot </span>
</h1>
I’ve put each word in a different div id to change the text color.
I’m not sure if there is a better way than this…
It's better to use <span>-Tags
DIV-Tags do also have a default property "display:block" from user agent style, that's the reason why you have to set "float:left" (which is really ugly in this case).
Try this
<div id="dotPerfect">
<div id="color1">Dinner </div>
<div id="color2">On The </div>
<div id="color3">Spot </div>
<div id="dotPersonal">Personal Meal Service is perfect for...</div>
</div>
Move the div with id dotPersonal to div with id dotPerfect.
I've tried the empty style tag trick but still no go.
Opening: sharpsma.com inside of the latest Safari, the far bottom right promo copy over the Sharp Zenigata promo is pulled over left.
Open the Dev tools in Safari and then just closing, snaps it into place. Or, any editing.
All works in all other browsers from IE7+, FF, Chrome and Safari 5 but in Safari 6, it seems to be getting hung.
Visiting the site in Safari 6 will be the easiest way to see the issue. Then, just open and close the dev tools and the promo copy snaps into place.
Any ideas on what could be causing this?
You have few errors in html code (* marked with stars, open site in Firefox, view source, and you will get better picture), in that part of page:
<div id="ThreePanelPromoContainer">
<div class="promoBoxContainer">
<a href="/sharpledlcd"><img src="sites/all/themes/sharptwentythirteen/images/front-page-bttm-all-led-promo.png" alt="lcds"/>
<p class="promoBoxTeaser">Sharp offers an extensive line of Industrial Strength LCDs.<br />
<span class="learnMore">Learn More **>></a><**/span></p>
</div>
<div class="promoBoxContainer promoBoxesMiddle">
<a href="http://www.sharpmemorylcd.com/" target="_blank"><img src="sites/all/themes/sharptwentythirteen/images/front-page-bttm-memory-lcd-promo.png" alt="lcds"/>
<p class="promoBoxTeaser">Memory in every pixel allows for rich content on a small display.<br />
<span class="learnMore">Learn More >**></a><**/span></p>
</div>
<div class="promoBoxContainer">
<a href="http://www.sharpleds.com/" target="_blank"><img src="sites/all/themes/sharptwentythirteen/images/front-page-bttm-zenigata-promo.png" alt="zenigata"/>
<p class="zenigataFrontPromo">Because life happens in full spectrum.<br />
<span class="learnMoreZenigataPromo">Learn More **>></a**></span></p>
</div>
i guess that Safari is more sensitive to these errors than other browsers. :)
I have this piece of code:
#bizMxp{position:absolute;min-width:140px;left:5px;z-index:100000;display:none;top:134px}
#bizMxp div{background-color:#fff;border:4px #6db03f solid;border-top:0;padding:15px;margin-top:20px}
$('.mxpbiz').hover(function(){$('#bizMxp').show('fast');},function(){$('#bizMxp').hide();});
<div id="mainMenu">
<ul>
<li<%=TabAttiva("mxpbiz",act)%>><a class="mxpbiz" href="#"><%=Lexicon("MXP BIZ")%></a></li>
</ul>
<div id="bizMxp">
<div>
<%=Lexicon("About us")%><br/>
<%=Lexicon("The Building")%><br/>
<%=Lexicon("Location")%>
</div>
</div>
</div>
and it works perfectly with Chrome, FF and IE <= 8, but with IE9 submenu's div doesn't appear even if I am using absolute position and z-index... is there something I could have missed for IE9?....
Thanks in advance to everyone! :-)))
Cheers,
Luigi
Which JS-Framework are you using? jQuery?
I tried out your code on JSFIDDLE: http://jsfiddle.net/PaEk9/
It works on my IE9.
Maybe it's the problem of IE loading jQuery - i hat that Problem too.
Try out to put your scripts at the bottom of the page or use jQuery instead of the dollar sign $ on scripts on the outside of the DOM-Ready Method.
Use the DOM-Ready function Like this:
jQuery(document).ready(function($){
// your code, now using '$'
});
Maybe this helps.
hey, i have a .net C# function thats write html image links code such as:
<img src="..." />
and show it by asp:literal,
it works fine in Explorer and Firefox but in chrome the clicking is disable,
any ideas?
example code:
<div class=\"whitebox\" style=\"width:500px;\">
<div style=\"float:left;\">
<a href=\"../reader/Default.aspx?u=4&t=2&sr=f-53D\">
<img width=\"75px\" height=\"75px\" src=\"http://www.Knu.com/main.jpg\" />
</a>
</div>
</div>
The only problem I can see with that is if you're somehow outputting it exactly like that, with the C# escaping included.
Take a look at this page in FireFox. Feel free to navigate to any of the top six product categories to see more of the same type of code.
If you are [un]lucky enough to see the glitch, you will see at least one product box expand it's height to epic proportions.
Here is the code:
<div class="product_category">
<a href="../products/dht_1500.php" style="height: 340px;">
<h3>DHT 1500</h3>
(superfluous HTML omitted here)
</a>
</div>
Here is what Firebug reveals:
<div class="product_category">
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
<h3><a _moz-rs-heading="" style="height: 340px;" href="../products/dht_1500.php">DHT 1500</a></h3>
(superfluous HTML omitted here)
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
</div>
You can see FireFox is definitely closing my tags and re-opening them again, and pulling the custom CSS height style along with it, which is resulting in each product box height skyrocketing. Also note that strange _moz-rs-heading="" bit.
I suspect my problem has to do with my using block HTML elements within an inline tag, but I thought I solved that problem by converting the tags to block formatting in my stylesheet:
.product_category a {
display: block;
}
FireFox is playing favorites to my tags. It usually renders the page like I want it, but then every once-in-a-while, it will blow one of my product boxes sky-high, and seemingly at random.
The pages work properly in Internet Explorer and Safari. I have been testing it with FireFox 3.6 on Mac, but have seen the same problem on FireFox for PC.
Having block level elements (h3) inside an inline element (a) is not valid HTML.
Change your block elements to a span and use CSS to style it how you wish.
A similar question with the exact same symptoms was asked a few days back. The solution there was in fact taking the native block elements out of the natively inline ones. Seems changing display doesn't help in this case.