As the title says, I have this small border around the entire table. I've just copied it from J2Ski to use on my website so it's not my own work.
I know this has most definitely been answered before but I can't figure out where to place the style in it and I'm not too sure what to place in there anyway.
<table style="border:none;">
<tbody>
<tr><td>
<iframe height="112" src="http://www.j2ski.com/snow_forecast/France/Tignes_mini.html"
width="340"></iframe>
</td></tr>
</tbody>
</table>
JSFiddle: http://jsfiddle.net/NGn9Y/
That's iframe border and not the table border, so use frameBorder="0" for your iframe element.
Demo
Note: IE requires capital B for frameBorder so make sure you don't
write frameborder="0"
Also, there is no harm in writing the below snippet in your CSS as #BeNdErR suggested, but that fails in older versions of IE, so also declare the attribute along with the below snippet in your CSS
iframe {
border: 0;
}
that is the iframe border
CSS
iframe{
border: none;
}
also, have a look at this other question about iframe border
Related
I am displaying the images with different size in html using img tag. One of the image is 267x168 while the other is 1068x672. Both of images are same but different size. Suppose the smaller image will be aliased as it has been displayed in 50% width. But both of them just look the same. Are the images has been proprocessed before displaying? If yes, how to disable it?
<!DOCTYPE html>
<html>
<body>
<h1>Result Comparison</h1>
<style>
img {
width:100%;
}
td{
border: 1px solid black;
padding:1%;
}
</style>
<table style="width:100%">
<col width="50%">
<tr>
<td align="center"><img src="original.png" width=50%/>Original (size)</td>
<td align ="center"><img src="bicubic.png"/>Bicubic (size)</td>
</tr>
<tr>
<td align="center"><img src="average.png"/>Average (size)</td>
<td align ="center"><img src="median.png"/>Median (size)</td>
</table>
</body>
</html>
When you resize an image, some processing must happen. The software doing the resizing (be that an image-editing program or a browser) must work out some way to remove pixels or add them. It does this using an image filter algorithm. Some common ones are point, linear/bilinear and cubic/bicubic.
In most image editing programs you can choose which type of filter to use, but browsers decide for you. Luckily it looks like you can have some control; based on the information on this page, it looks like you could add a CSS rule to get a pixelated look, like so:
img {
image-rendering: pixelated;
}
However, it's worth noting that to get the pixelated look you have to use a different rule for certain browsers, according to this page. In Chrome, pixelated works, but not crisp-edges. It's the opposite for Firefox.
I have been trying to make a Table based navigation bar made of 5 side by side images that, when hovered and clicked, "highlight" using reduced opacity on :active and :hover with a light background color. For example
.navbright {
background-color:#FFC39A;
}
.navbright:hover {
opacity: 0.6;
}
.navbright:active {
opacity: 0.3;
}
The problem is the implementation of the background color. It is always sitting lower than the image by a few pixels. All the solutions I've researched have not worked, i.e. border-collapse:collapse; margin-bottom:-3px; setting all borders padding spacing margins to 0 etc etc.
I would like to find a Table solution based around eliminating the extra space/ background space. If this is not possible, perhaps someone can tell me how to construct the same construct using strictly CSS instead of a table.
The one case where I got it to "work" is when I used divs, and set the background-color as part of the div's class i.e.:
<td><div class="navbright"><img src="/images/Home.jpg" alt="" width="200"></div></td>
However, with this solution there was an annoying extra line appearing during the :active phase, which is unresolved here: CSS HTML line appearing on div :active not to mention the fact that the background image ceased working...
So I set out to solve it using table bgcolor. I cannot get rid of the extra background color showing up beneathe the table no matter what I do. I am exhausted, and need expert help. Here's the table coding:
<table id="page" align="center" width="1000" height="37">
<tr>
<td><a class="navbright" href="http://www.criticalawakening.com"><img src="/images/Home.jpg" alt=""></a></td>
<td><a class="navbright" href="http://www.criticalawakening.com/Articles.html"><img src="/images/Articles.jpg" alt=""></a></td>
<td><a class="navbright" href="http://www.criticalawakening.com/Forum.html"><img src="/images/Forum.jpg" alt=""></a></td>
<td><a class="navbright" href="http://www.criticalawakening.com/Store.html"><img src="/images/Store.jpg" alt=""></a></td>
<td><a class="navbright" href="http://www.criticalawakening.com/Contact.html"><img src="/images/Contact.jpg" alt=""><a></a></td>
</tr>
with #page basically being an attempt to collapse the extra space
#page td {
padding:0; margin:0;
}
#page {
border-collapse: collapse;
}
Any help is appreciated. And also, if someone has a good idea for a CSS only design without tables to achieve the same thing please let me know. Basically, its a 1000px wide centered column.
Wow, that was a ton of work. I found a solution, perhaps not THE best solution.
First, I set the TABLE to house the background color, and displayed it as a BLOCK...
<table style="display:block;position:relative;top:0px;" align="center" height="37" width="1000" bgcolor="#FFC39A" cellpadding="0" cellspacing="0">
I decided to approach it with a simple inline-series of images. I set the IMAGE as the .navbar class, and changed its rules as following:
.navbright {
position: relative;
top: 0px;
}
Taking away the whole background task from the class entirely. Setting the positions to relative allowed much more flexibility with the positioning, even though they are both modified by 0px... go figure...
There is still one last glitch of a border showing upon :active around my links but that is another question... CSS HTML line appearing on div :active
I just started learning HTML today and was wondering how to have generic width so it fits the screen perfectly across every screen resolution?
Here is my current code, I tried using percents but code no worky!
<!doctype html>
<html>
<head>
<title>Home</title>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="70%">
<a href="">
<img src="Resource/Header.png">
</a>
</td>
</tr>
</table>
</table>
</body>
</html>
If you want your table to span the full width of the screen you should define it like this:
<table align="center" cellspacing="0" cellpadding="0" style="width: 100%;">
...
In general don't use the width attribute but rather the style attribute
Also noted in the comments, it's better to use semantic markup and put your CSS in external files, but if your just starting out, it's probably a good way to get going.
Some other links you might find useful:
https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials
http://getbootstrap.com/ => Advanced CSS framework (I would advice you to learn the basics first)
It's unclear exactly what you're trying to do. One interpretation is that you're trying to have an image left-aligned inside a box which occupies 70% of the page's width (here showing Resource/Header.png to be 300 pixels wide):
In that case, you need to add two empty columns and fix the table's width to 100% of the page:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
It's also a possibility that you want the image to take the whole 100% of the cell—that is, 70% of the page. In that case, you need to fix the width of the image to 100%:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png" width="100%"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
…but tables are for tabular data, not for layout.
Fortunately, every result we've achieved up to now is trivial to achieve using CSS. We need a container and an image:
<header> <!-- header is a new tag in HTML 5; use something else if you want -->
<img src="Resources/Header.png">
</header>
Then, you need to style it up with some CSS:
header {
width: 70%;
margin: 0 auto;
}
Try it on JSFiddle.
I think the margin: 0 auto; line requires some explanation. We are using shorthand style, where we first provide the vertical margins and then the horizontal margins. It is equivalent to
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
We don't actually care about the margin-top and margin-bottom; what actually makes it do anything is the margin-left and margin-right. When one of the margins is auto, the browser will use that margin to fill up any extra space. When both are auto, it will evenly distribute the space between them, thus evenly padding out both sides and centering our element.
Now say we want the latter style we achieved with the table. Then we give the img all of the space within that element:
header > img {
width: 100%;
}
Try it on JSFiddle.
Note that we only needed to change the CSS, and none of the HTML needed to change. This is one advantage of using CSS over tables for layout—change the styles in one place, everything that uses those styles is updated. Also note that the code using CSS is shorter, although this isn't always the case.
…but we still aren't accessible.
If you have an image, always add an alt attribute. The alt attribute is supposed to be a replacement for the image if the user agent cannot display the image, or if the user is blind, etc. For your header, whatever text appears would be fine:
<img src="Resources/Header.png" alt="Frank's Flower Shop">
For purely decorative elements, alt="" should be used. (Yes, an empty alt is better than no alt—but only when it is purely decorative.) Refrain from describing what it is—instead, provide content that could adequately replace the image. (e.g., “screenshot” is bad; “the main window contains a toolbar and a content viewing area” is much better.)
But if it's a header, a search engine might put less weight on the alt text of an image than if it were right there. It turns out that there's a trick we can do with CSS to achieve this. First, write out the HTML as it would appear to a search engine or user with a screenreader:
<header>
<h1>Frank's Flowers</h1>
</header>
Then we can put the image as a background on the h1 and dedent the text out of view:
h1 {
width: 300px;
height: 100px;
background: url(Resources/Header.png) no-repeat;
text-indent: -10000px;
}
Ta-da! Unfortunately, it's harder to combine this approach with scaling the image. In newer browsers, you can use background-size, but that was only introduced in CSS 3. For greatest compatibility, you may want to consider using plain text where possible and aligning that over a decorative background or just not scaling it.
My page layout is structured in tables (I know this is not ideal - I inherited it).
I am trying to display an iframe in a div with the following code inside a table cell () as below:
<td class="style24" style="width: 800px">
<div id='outerdiv '>
<iframe src="www.google.com" id='inneriframe' scrolling=no >< /iframe>
</div>
</td>
The issue is the iframe causes the table cell to grow and then pushes the content on the right of the page off the page!
Is there a way to limit the size of the iframe that's displayed that won't make the table cell grow? Limiting the width of the iframe doesn't seem to have an effect, as soon as the div content is placed in the td the effect occurs.
You can try adding the width and/or height to the iframe and #outerdiv (add overflow-x to the #outerdiv as a failsafe):
<td class="style24" style="width: 800px">
<div id='outerdiv' style="width:800px; overflow-x:hidden;">
<iframe src="www.google.com" width="800" frameborder="0" id='inneriframe' scrolling=no >< /iframe>
</div>
</td>
place an css overflow attribute on the outerdiv, you might also declare the width of the iframe
This is working for me, but without seeing styles associated with #outerdiv, .style24, and #inneriframe, it's a little difficult to tell if this would work for you or not.
#outerdiv {
width: 800px;
height: 600px;
}
#inneriframe {
width: 100%;
height: 100%;
}
Ok, so, I have the following markup that opens in a pop-up window (the size is adjusted to 120px width and 300px height via Javascript):
<body bgcolor="#000" topmargin="0" leftmargin="0" style="width:100%">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center" height="300" valign="middle">
<img src="sample.jpg" width="120" height="300">
</td>
</tr>
</table>
</body>
I know that the image there is not exactly what you'd call "tabular data" and that there is CSS all over the place. The truth of the matter is; this markup is not best friends with the box model and it's out of my reach to change it, I'm just supposed to find the error I'm about to describe.
Only on Firefox (various versions and plattforms) - and for some reason not always (I couldn't find a pattern yet) - the image isn't displayed in full. The window is getting resized to the correct size, but it seems like the body / table of 100% only shrink to 190px and stop there, from that point on only the viewport shrinks, but the body stays at 190px. Since the image is centered, this causes a 35px border to display on the left side - and the image to overlap the viewport (therefore not being displayed in full).
The weird thing is that I accessed the exact same page with the exact same browser / OS without changes yesterday and could reproduce the error (also after reloads, restarts etc.) and can't anymore, because not the body does shrink to 120px just fine. I can't find the pattern here.
Any suggestions or ideas are greatly appreciated!
Thanks a lot for your help in advance
Tobi
I know you said the markup is out of your control, but do you need the table at all? If the popup is the same size as the image why not just have the image?
If I remember my 90s HTML, topmargin and leftmargin are IE specific, so you may need your body tag to be:
<body bgcolor="#000" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
remove the width 100% if you can. Better still, remove all the body tag attributes and do it all with CSS (which will work much more reliably):
<style type="text/css">
body {
background-color: #000;
margin: 0;
padding: 0;
}
</style>
if it still doesn't work there must be something else on the page causing the issue.