I have a site where I am using Litebox to display images. On pages with QuickTime embeds the box appears below the movie. How can I get the box to appear on top? I tried setting wmode=transparent but, while it works in Webkit browsers and IE, it fails in Gecko browsers.
Whenever I lightbox or render anything over a select box, I have to hide the select box via display:none. This prevents the select box from rendering over top of whatever I'm rendering in IE 6 (maybe 7 and 8 too, not sure).
You may have to do the same thing to the quicktime embed in this case.
Related
I'm trying to see what default css values (possibly source code?) are for webkit psuedoelements so that I can create custom webkit items that are very similar to the default, but slightly customized.
These items are shadow elements that don't show up in the DOM. you can enable 'Show user agent shadow DOM' in chrome devtools settings, per
Inspect webkit-input-placeholder with developer tools, but i'm still not seeing elements in the DOM. I suspect the styles are being provided by user agent stylesheet for these webkit items
Load a page utilizing the CSS in question with your browser, then you can use developer features to inspect it.
Right-click the page
In Chrome, the menu choice is 'Inspect'
The screen will split, the page source appears on the bottom of your screen (not sure what happens if browsing on a phone)
On the bottom of the screen, you will see the html, on the bottom right you will see the pertinent CSS you select some html on the right.
Note there is a link to the style sheet on the far right, click to view
Unfortunately, the link is hard to read because all spaces and linefeeds have been removed, but you can paste it into an editor and make it easier to read
I'm using a Google CSE on http://afv.com and the results page is so wonky for Firefox and Safari. Here's what I see:
Chrome (looks perfect):
Firefox (magnifying glass gone in blue button, text falls out bottom of input field):
Safari (input field far too wide, sends blue button off edge of page):
I've mucked around with the style sheet Google gives me, to try to override some styles and standardize the output, but I can't see why it's so weird across browsers. Any thoughts? I know using a CSE is a bit of a hack and I'm having to shoehorn it into my layout, but these pictures show some incorrect layouts (or in the case of Safari, wildly incorrect), beyond just minor formatting issues.
This is probably because some of your own css is influencing the search button (e.g. a library like bootstrap or a css reset). If you try a search button without any additional styles - e.g. this one:
enter code herehttp://jsfiddle.net/buQL3/1/show_html/
it should render correctly (renders well for me in OS X 10.8.5 latest Chrome, Firefox 24 and Safari 6.0.5).
I am making a site. I am using Drupal 7 with HTML5 strater kit of Omega theme. I have poped up two regions. Each one contains an image and some text (image on the top and text in the bottom). Now the display for the IE9 and chrome is OK but for firefox is not understandable for my brain. the address is http://cakes.apakistanichristian.co.uk/. the reason i am giving out the web address is because i have no idea what css or html code i should post. Just open it in firefox, IE and chrome you will see the difference.
Thanks in advance.
I created a website in Wordpress but I seem to be experiencing cross browser compatibility issues in Internet Explorer, most notably Internet Explorer 7 & 8
http://www.vokins.co.uk/
There is an issue with overlapping on the home page (logo and contact number) and none of the properties appear to display on property search (The page appears blank)
The year dates on the News page appear to be sitting to the right of the image rather than in the grey box
How can I rectify this to ensure consistency across all browsing platforms?
I've tested your website (using the tool BrowseEmAll) in IE7, IE8 and IE9.
It works nice in IE8 and IE9 but in IE7 the overlapping is clearly visible:
I would suggest changing the margin of the element "site-title" to padding.
I am trying to make my mobile site accessible to as many browsers as possible, and I noticed when using the opera mini simulator (http://www.opera.com/mobile/demo/) that it doesn't support css background position - which I'm using to display a sprite for all of my site images. Are there any workarounds for this?
There has to be something else that keeps your code from working, because Opera Mini 6 does actually support background position.
Th website of the company that I am working for uses background position in some places, for example to change the color of the active menu button, and that works just fine. On the other hand there is some other rendering problem that makes it only show part of the button, but that part is the right color...