I made some mini plugin which works with Youtube API.
But something wrong with my CSS: It destroys whole page structure.
Here is the main page where all works well (without problematic piece of CSS):
http://pikproduction.az/?lang=ru
and the page that I'm talking about (witH problematic piece of CSS):
http://pikproduction.az/?lang=ru&page=11
The same CSS working well on another page
http://tural.us/?page=utube
Can't figure out, what am I missing?
You are adding your "video" class to video wrapper and I don't know why but html tag too. It has width:228px; that causes problem. Also i'm not sure why are you using classes on your html tag(and there are like 20+). Solution for your problem is rename video class or delete it from html tag. Good solution is change your html tag to <html lang="ru" xmlns="http://www.w3.org/1999/xhtml">
the whole .video class from your tag should be removed on problematic page:
.video {
border: 1px solid transparent;
float: left;
font-size: 11px;
height: 150px;
margin: 0 25px 25px 0;
width: 228px;
}
Related
I created a site on my blog where I'm putting yt videos. Unfortunately the container of this site goes left and I have no idea why. It doesn't happen to any other site of the blog.
I'm using Virtue theme - https://www.kadencethemes.com/product/virtue-free-theme/
Here's the link to the site I have problem with: http://mlodziez-wks.slask.pl/multimedia/wideo/
I would be more than thankful for help.
This is happening because you added that CSS in your stylesheet
.wideo {
width: 300px;
heignt: 169px;
display: inline-block;
}
Which class is getting called in your "body" tag. And you are forcing your body to stay in 300px width only. Therefore you need to remove it or replace it with
.wideo {
width: 100%;
heignt: 169px;
display: inline-block;
}
it is because you have the CSS class wideo iny our body element, that is adding the following CSS style to it:
width: 300px;
heignt: 169px;
display: inline-block;
You need to remove this class from the body, it is defined outside a CSS file, so it must be added over some theme customisation or similar stuff.
Set your css to
.wideo {
width:100%;
height: 169px;
display: inline-block;
}
This will solve your problem.
I am trying to vertically align a span-tag inside a DIV. I have a working example on JSFiddle but the EXACT same CSS and HTML will not work on my own site.
#drop_zone {
width: 500px;
outline: 1px solid #E1E1E1;
margin: 0 auto;
height: 200px;
line-height: 200px;
}
#drop_zone span {
display: inline-block;
line-height: 19px;
vertical-align: middle;
}
<div id="drop_zone"><span>Drag file here.<br />Your file will <strong>not</strong> be uploaded!</span></div>
Now, it works on JSFiddle and on Stackoverflow, but why does it not work on my own site? You can check out the results here: http://snorlax.org/stackoverflow.html
If you check the source code, you can see it's the exact same code. What on earh is going on?
Your document is missing the Doctype, so you are triggering Quirks mode. The feature you are trying to use only works correctly in Standards mode. Add a Doctype. Use a validator.
I'm having a weird error that I can't figure out myself.
I have an image tag inside a figure tag(tested with div tag also), but when I add classes to the figure tag, then the Image doesn't show. It does show if I don't add the classes though.
I'm using LESS with a compiler, so it compiles it to css automatically.
HTML for that part:
<div class="span9 clearfix">
<figure class="ad-block fr top-ad">
<img src="http://lorempixel.com/468/60" alt="Ad" />
</figure>
</div> <!-- end span9 -->
CSS for these tags:
.ad-block {
.box-shadow(0px, 0px, 5px, #border-color);
img {
display: block;
}
}
.top-ad {
margin-bottom: 3px;
}
.fr { float: right; }
figure {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Images showing the error:
With tags
http://www.bildites.lv/images/2rzac0wyi01ekhhvn7b.png
Without tags
http://www.bildites.lv/images/aq3agebpc7a5o3efltc.png
I tried to use only one class to test things. The only class that worked was fr(float:right;)
The weird thing is that even if I leave only ad-block or top-ad class and comment out all the css styling of that class, the image is still don't show up.
I can't manage to figure this out. Any help would be appreciated.
I'm using localhost, xampp, if that changes something.
EDIT: It turns out that I'm super forgetful about the adblocker that I recently added to my testing browser. Disabling it fixed the problem. Thanks Mr Lister and jthe for fast comments. :)
It turns out that I'm super forgetful about the adblocker that I recently added to my testing browser. Disabling Ad Blocker it fixed the problem. Thanks Mr Lister and jthe for fast comments. :)
The background image doesn't appear in IE8, but it works fine in all browsers, including IE9
Relevant CSS:
#player {
background: url('/images/tv-screen.jpg') center top repeat-x;
padding: 25px 26px 0 -1px;
width: 660px;
height: 403px;
border: #555 solid 1px;
margin-top: 0;
margin-bottom: 0;
}
Relevant HTML:
<p id="player">...//some data ..</p>
The CSS looks okay.
I think IE8 fails on the tag itself: <p id="player>. The id attribute doesn't have a closing ". If this causes the id to be misinterpreted, the CSS selector will
not match it.
the problem is : there is iframe inside iframe which blocking the background I don't know why , even I make the two iframe with wmode=transparent.
so I created a background in last iframe by js in IE less than 9 only.
thanks guys for your time .
are you using the correct DOCTYPE ?
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Have you tried removing the negative padding that you have set. This can cause issues in ie7/8.
So, I have an issue with the hover state of a link in IE8. Code is as follows:
<div id="navigation">
Home
</div>
And the CSS:
#navigation {
float: right;
height: 29px;
margin: 50px 0 0 23px
}
#navigation a {
color: #FFF;
float: left;
font-size: 120%;
height: 25px;
margin-right: 7px;
padding: 2px 10px;
text-align: center;
width: 104px;
}
#navigation a.home {
background-color: #f4e034;
}
#navigation a.home:hover {
background-color: #fffbd4;
}
Now, this works fine in every other browser I have tested in (Chrome, Safari, FF, IE6, and IE7), it just won't change the background color of the link in IE8 on hover.
I have tried adding display: block and display: inline-block to the a element. I have also tried adding !important after the background-color in the hover tag. I have also made sure that there are no other elements in the CSS that is affecting this.
Googling this problem gives me a bunch of things regarding the IE8 beta, which this is not. It also gives me answers for menu related links, which this is not. It gives me answers for things being affected that aren't background-color. And it gives me things where changing the font-color works, but not the background-color (neither works in my case).
Just wondering if anyone else has ever noticed this issue and has something they can provide on this. Let me know, thanks in advance.
I had the seem problem as yours. I tried every way as you did but it has no use.
My final solution was to set a background-color on the element you need to hover, then it worked.
I felt shocked at that time and I don't know why still now.
Do you have a DOCTYPE specified on your HTML page? It might seem obvious, but I've had similar problems with the :hover state in IE8 - especially when editing old sites.
The solution for me was to add a DOCTYPE above the opening HTML tag on your HTML page
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
I hope this helps!