I am building the following site:
http://www.verbum.xtrweb.com/soon.php
But as you can see, everything is zoomed. Not if you adjust it, but I dont want users to have to adjust their view for my site. I want my site to always appear with the same zoom, as in the picture I uploaded here:
ctrl + 0 is not a solution I am looking for. If not something in the code, probably a style property or something of the kind. See code in your browser to check. Thanks!!
Apart from all the small errors and mistakes found on your page by previous users, I would advise you to wrap your header content into a container with a percantege width. This way it will keep the same width according to the browser window width in all browsers. The font size of your paragraphs should be em also to adjust itself easily. Keeping all this in mind and cleaning up your code, you should be able to deliver the same experience to most of the users
Looks like you made a typing-error. Change the font-size of your paragraphs into px or em. So font-size: 37px (instead of 37pt).
Here, the file did not exist:
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
Maybe you should fix this first.
Also, I don't think it's a good idea to include multiple versions of jQuery on the same page.
Update:
<div id="facebook" style="display: inline; opacity: 1.0999999999999999;">
<input style=" " id="fb-button" type="submit" value=" " onclick="window.location.href='http://www.facebook.com/sharer.php?u=<http://verbum.xtrweb.com/>&t=<Verbum, the new dictionary>'" <="" input="">
</div>
The HTML above (copied from your page) is wrong; the input tag does not close properly.
Related
In the last days we have seen how our newsletters doesn't print as they use to do in Yahoo Mail. Some <td> elements are taking more space that they were supposed to take. After some checking we have seen that width attributes in our inline styles are replaced by min-width.
I was try to see if there were any change in Yahoo Mail but I couldn't find anything. The only thing I have found an issue in github explaining how this behaviour is suppose to happen in Yahoo and in Gmail with the height. I've checked Gmail and it's not happening and everything was ok last week in Yahoo Mail.
Is anyone suffering the same issue? Does anyone know the explanation to that?
This is one of the newsletters suffering the problem, and this is how we see it now.
I answered this question earlier today, here's that answer:
Quick fix, place this in your <style> tag: #media yahoo {min-width:0!important}
This change/bug is brand new at the time of this posting. Yahoo is now changing width to min-width, breaking hybrid layouts among other things. There is a good discussion about other hacks in the Litmus Community.
Table elements for my purpose are parent elements to a button.
For (parent) table elements I placed "!important" next to "min-width" with no spaces.
The html is placed "inline". See the example below:
<table align="center" width="200px" bgcolor="#0076be" style="border-spacing:0;Margin:0 auto;width:95%;max-width:200px; min-width:0%!important;">
Button element has no inline style element of "width".
See example below:
<img src="[[asset_3]]" width="195px" style="border-width:0;max-width: 195px; height:auto;display:block;margin:0 auto;" border="0" alt="Click Show Images to Make Links Work">
Visit Yahoo Mail Update Potentially Breaks Hybrid Emails for more information.
I'm currently using DYI app builder platform and they have a <>source code page. So I put in
<img src="URL.png"/>
And it worked! But when I tried to shrink the image (original image is width=256 height 256)
<img src="URL.png" Width="100" Height="100"/>
Nothing happens to the size of the image.
So I tried
<div style="width:100px;height:100px;overflow:hidden;" >
<img src="URL.png" width="100px" height="auto">
</div>
Which I picked up on StackOverflow.. But it doesn't work.
Please help. BTW I have no knowledge of coding so please do not skip a step assuming I would know it.
(When I apply the code and go back to the source code page width and height disappeared from the source code page except the bare bone Img src="URL")
Something in your program is overriding it or disabling it (filtering it away). If it is another css rule that is overriding your css, then you could try:
width:100px !important;height:100px !important;
if this doesn't work then apparently the css gets filtered out, you might check the program's settings if this behavior can be changed
Try to save the page, in the DYI app builder you're using.
I'm working on a facebook tab that includes an iframe showing content from another website. I've narrowed the iframe down to only showing the part of the website that I want it to and disabled scrolling. In addition to that, I'd like to disable the links in the iframe content, and I've read that it should be possible by adding a transparent .png background image to a div containing the iframe and setting the iframe's z-index to -1, but the iframe is still in front of the image.
So far my css looks like this:
<style type="text/css">
iframe
{
z-index:-1;
}
.bgimg {
background-image: url('transparent.png');
}
</style>
and my html like this:
<div class="bgimg" style="overflow:hidden; width: 700px; height: 100%;margin:auto;">
<iframe src="http://www.url.com/site.html" width="1100" height="700" seamless="seamless" frameborder="0" scrolling="no" style="margin-top:-230px;"></iframe>
</div>
I'm using this to give a direct link to my amateur soccer team's league table, instead of manually having to update the tab each week with all the new information, but I don't want it to be possible to click on each team for team information - just the League table.
I've read several places that this should be possible, but haven't been able to find a functioning code - also read a few places saying it's impossible, and yet some others that say it can only be done using jQuery (which I know nothing about).
If anyone has any alternative solutions to what I'm doing now - please let me know.
Keep in mind that z-index only works for positioned elements (can be relative though.)
See: http://www.w3.org/TR/CSS21/visuren.html#z-index:
Applies to: positioned elements
I have just added a 'Like' button from Facebook. The site is in Arabic, and I have added the necessary Arabic language locals to the FB code. Now the problem is the Icons are displaying slightly different, and I can see that can be controlled by CSS. The FB Code loads an iframe and within that there is a SPAN that has a class that controls the position of the Facebook (blue 'f' icon) which is overlapping over the text. When I try using FireBug and re-position it it words fine. My question is how can I write a CSS code that I can change the value on that iframe loaded CSS from my local CSS file ? The code is as follows:
=== Code on the iFrame that is loading ===
<div class="connect_button_slider">
<div class="connect_button_container">
<a class="connect_widget_like_button clearfix like_button_no_like">
<div class="tombstone_cross"></div>
<span class="liketext">أعجبني</span>
</a>
</div>
===
The CSS that is loaded by FireBug
.button_count .like_button_dark .like_button_no_like .liketext, .button_count .connect_widget_like_button .liketext {
background-position: -1px -47px;
}
====
I need to change the "class"="liketext".
I want to change the value of "background-position: -1px -47px;" from that to the following:
background-position: 38px -47px;
====
Now I have my local CSS file, how will I be able to access that element "liketext" and change the value from "-1" to "38" ...
The page, if you want to check, is on the following link ...
URL: http://www.majalla.com/arb/2011/09/article55227042
On top of the article you will find the facebook icon/like overlapping just next to the print icon.
I really don't like telling you that your work here was pretty much wasted. You can't influence an external iframe with css - that's why Facebook does it that way, to have full control over their icons. Anyway it's a shame that the like button doesn't get displayed properly, but all you can (and should) do is submitting a bug report to facebook!
By the way, try taking care of your spelling: It's that, not tath and THAT spelling makes it really hard to read your question ;)
I can go to facebook and get the code for a "like box". Very handy.
Problem is, the display of this box is lame. it's not consistent. The first article in the 'stream' is displayed with this sort of indentation:
The next article in the stream is displayed with different (lame) indentation.
This is in the same likebox, I merely scrolled down.
The effect is not limited to the stream for "Facebook Platform". I've seen it in the Likebox for other streams as well.
I'd like to style the box, to try to make the indentation consistent, but it appears to be rendered as an iframe, which (I think) means I cannot style it because of the S.O.P.
How can I fix this?
Is there a workaround to display a likebox in a div that is not, eventually, an iframe?
EDIT: bug logged: http://developers.facebook.com/bugs/237053466346453
EDIT: I compared the fb:fan control and the likebox control. With the fb:fan thing, it is possible to provide custom CSS to style the contents. (There are some caveats.) I set the width and margins of the text, and also erased the actorName, which is the same for every post. This is the result:
The left side is produced with this code:
<fb:fan profile_id='19292868552' width='292'
connections='0' show_faces='false' stream='true' header='false'
css='http://example.org/fb/customfanbox.css?_=6392'></fb:fan>
The right side is produced with this:
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=false&border_color&stream=true&header=false&height=525"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:292px; height:525px;"
allowTransparency="true">
For the left-hand-side, if you don't want the fb:fan element, you can use an iframe that points to fan.php, like this:
<iframe src='http://www.facebook.com/plugins/fan.php?connections=0&css=http%3A%2F%2Fexample.org%2Ffb%2Ffb%2Fcustomfanbox.css%3F_%3D0292&id=19292868552&locale=en_US&sdk=joey&stream=true&width=292&height=560'
scrolling="no"
frameborder="0"
style="border-bottom:1px grey solid; overflow:hidden; width:292px; height:525px;"
allowTransparency="true">
You could try using the older fan box plugin which offered loading an external CSS file. I don't know if it still works. If so, it could stop working any moment.
You certainly are not the only one with such problems. I suggest you file a feature request / vote for an existing one.
You cannot style pages form other domains.
That would also make XSS possible.