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. :)
Related
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.
Hoping someone here can help me, I installed a wordpress theme on a site ( http://nationalaviationinstitute.ie/ ) and I have an issue I can't resolve and the developer of the theme is refusing to acknowlege the issue!
If you visit the above site in Chrome, the bottom section of the site jumps up and covers the four service areas underneath the image slider. This only happens in Chrome, it's ok in all other browsers, it's obviously something to with the responsiveness of the site as if you resize the bottom section moves back to the correct position.
I'm fairly familiar with CSS and HTML so if anyone could give me a hand figuring out the cause of this and a possible solution I'd greatly appreciate it.
Thanks,
Anthony
There is a javascript bug which is giving the divs inside each <li> tag style="height: 0px;" on resize event like the example below:
<li class="span3 thumbnail">
<div class="block-thumbnail maxheight col" style="height: 0px;">
<i class="icon-3x icon-cogs"><i class="circle-border"></i></i>
<h3>Our Courses</h3>
<p>At NAI we have a number of different courses to suit everybody’s needs, academic to professional. <a class="link" href="http://nationalaviationinstitute.ie/courses/">read more →</a></p>
</div>
</li>
if you find and fix the js that is causing this problem than the problem will be fixed.
But incase you need a faster fix you can add the following css:
.block-thumbnail{
display: inline-block;
}
It will override the style="height: 0px;" added by the js and the bottom section will be pushed down
Out of nowhere the title on my youtube video is overlapping the share and more info buttons within the video header. If you hover over the video the title compresses correctly.
Fiddle with the example:
http://jsfiddle.net/QpckF/
Here is my code:
<div class="interior-container">
<h3 id="video-text">Why Book with Rail Europe?</h3>
<iframe frameborder="0" name="player" allowfullscreen="" id="player" title="YouTube video player" height="217" width="365" src="http://www.youtube.com/embed/wV-S_MOusMI?controls=1&showinfo=1&modestbranding=0&wmode=opaque&enablejsapi=1&origin=http://www.raileurope.com"></iframe>
<div class="vid-arrows prevvid">
<i class="vid-prev icon-video-left-arrow"></i>
</div>
<div class="vid-nav">
<a target="player" data-text="Why Book with Rail Europe?" class="fader first active" href="http://www.youtube.com/embed/wV-S_MOusMI?controls=1&showinfo=1&modestbranding=0&wmode=opaque&enablejsapi=1&origin=http://www.raileurope.com" id="default"></a>
<a target="player" data-text="Train Travel in Europe: Rail Pass vs. Tickets" class="fader first" href="http://www.youtube.com/embed/rxlq8KirhNM?controls=1&showinfo=1&modestbranding=0&wmode=opaque&enablejsapi=1&origin=http://www.raileurope.com" id="default"></a>
<a target="player" data-text="Why Travel by Train in Europe?" class="fader first" href="http://www.youtube.com/embed/pQ8DwmEg9wk?controls=1&showinfo=1&modestbranding=0&wmode=opaque&enablejsapi=1&origin=http://www.raileurope.com" id="default"></a>
</div> <!-- end vid-nav -->
<div class="vid-arrows nextvid">
<i class="vid-next icon-video-right-arrow"></i>
</div>
</div>
</div>
Is this a problem with youtube or my code?
Thanks
Trial and error testing seems to indicate that this is just an interface bug in the Youtube Flash player -- it doesn't truncate the title properly until a mouseover event has been triggered.
A few other interface issues I discovered; it appears that when a video is less than 350px in width, those 'share' and 'more info' buttons aren't even rendered by the flash player, so the problem will only occur if it is more than 350px but less than needed to have the full title visible.
Also, if the video is less than 201 pixels in height, the control bar at the bottom won't auto appear (to save space); but when there is no control bar, then a mouseover cannot trigger the title to be concatenated until the video starts playing.
Minor annoyances, but ones that only come up in a few cases so don't know how big of a priority they are. You could try reporting the bugs (or see if someone else already has).
I was having the same problem. You can also add "showinfo=0" to the url and it won't show the title at all.
I've put together this small little piece but I'm having problems with the renderings below IE9.
I've been going over a bunch of tutorials and have even tried a version of the "html shiv" technique, but to no avail.
I'm not sure what the problem is. I cross tested it and it works in pretty much every browser minus IE8 and below. I'm just curious if I'm going to have to rework an entire style sheet for the IE8 and less bunch or if I'm just missing something.
In IE8/IE7/IE6 the hover states for the buttons work, but it's as though all of the boundaries disappear.
http://www.brodieyazaki.com/matt_tiles
is a live working version.
Here's the HTML (I would include the CSS but it's long, but you can view it in developer tools sorry for the inconvenience).
<section id="tile">
<button id="toggle_button"></button>
<section id="tile_content">
<figure id="tile_content_figure" class="clearfix">
<img src="imgs/tile_pic.png">
<h1>
“Siri's Default Settings Leave
Your iPhone 4S Exposed”
</h1>
</figure>
<div id="tile_content_link">
<p id="from_in">
From nytimes.com in arab spring
</p>
</div>
<div id="tile_content_comment" class="clearfix">
<img src="imgs/user_img.png">
<p>
"This is the basic version of the tile"
</p>
</div>
</section>
<footer id="tile_foot">
<div id="foot_wrap" class="clearfix">
<figure class="like_view">
<img src="imgs/like.png">
<span>10</span>
</figure>
<figure class="like_view">
<img src="imgs/view.png">
<span>100</span>
</figure>
<article id="social" class="clearfix">
<button id="facebook"></button>
<button id="tumblr"></button>
<span>share</span>
</article>
</div>
</footer>
</section>
Just looking to get pointed in the right direction. I know that the CSS has features that IE8 and below won't pick up, but the head scratcher for me is that it's as though the style sheet in its entirety is broken.
please help, and thank you
< ie9 doesn't understand your html5 elements: article, footer, section, figure; offhand i'd just go ahead add html5.js and then turn them on in your css:
article,figure,section,footer{display:block}
i think that should fix what you are talking about
You have lots of duplicate id's. id's must be unique per element or a browser may ignore subsequent instances of the id. You should also declare a document encoding, among other HTML Validation errors...
http://validator.w3.org
Your site is more likely to work as expected, in all browsers, when its HTML code is fully compliant.
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.