I'm using a three-column Skeleton layout for my website. All works how I want it apart from one thing. I have an image aligned and above a table. See below:
http://www.cosworth-europe.co.uk/catalogue/pistonringsets.html
If I add max-width:100%; to the image it slightly shrinks and moves it out of line with my table before I've even resized by browser. See here:
http://www.cosworth-europe.co.uk/catalogue/pistonringsets2.html
Is there a way I can keep the max-width, but so it doesn't resize at all until the screen size changes?
HTML
<div class="six columns">
<img src="../images/catalogue/pistonringslarge.jpg">
<p style="padding-top:10px;"></p>
<table style="font-size:11px; width:380px; margin-left:20px;">
<tbody>
<tr>
<td style="padding-right:5px; width:70px;">Product Code</td>
<td style="background-color:#133D8D; color:white; padding-left:5px;">Description</td>
</tr>
CSS
.container .six.columns {
width: 340px;
}
as Mr Listed pointed out... my image was fine, it was in fact the table that had overgrown the div due to adding a 20px margin. I removed the margin and added max-width:100% to my table. all works great now.
Related
I am trying to put text over an image. Something like this (i have changed the background image for propriety reasons)
The tool/app i am working with has following limitations -
Using negative margins don't work
Using position:absolute and position:relative don't work
fancy stuff like grid and flexbox also dont work
I know i know. You all are thinking "what the heck is it?". But if any one of you used salesforce visualforce email templates, you will know what i am talking about.
So i need to implement it without them. I want the image to retain its aspect ratio as i compress and expand browser window.
When i use background image html tag, i notice that background image does not maintain it's aspect ratio. In full screen mode, it stretches horizontally (actual image i am using has drawing of animated characters in it, which visible look horizontally stretched out)
<div style="color:white; background-image: url('images\background.png');max-width: 100%;height: auto;overflow: hidden;background-size: 100% 100%;">
But when i use an img tag, image fits the full screen nicely, and maintains its aspect ratio when i change browser window size
<img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto">
So i figured i need to come up with a solution without using background image (or negative margin or position:relative) and somehow get text on it.
I read a post where a guy suggested a hack using tables -
How to put text over an image without absolute positioning or setting the image as backbround
It seems to work to an extend. I need help fixing it. Here is the final code i have-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<table>
<tr>
<td></td>
<td rowspan=2 colspan=2><img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto"></td>
</tr>
<tr>
<td rowspan=2 colspan=2><h1 style="margin-top: 5rem;padding-bottom: 25rem; text-align: center; color:white">Thank you for submitting feedback</h1></td>
</tr>
</table>
</div>
</body>
</html>
Issue i am facing is if i compress browser window too much, the text float above the blue image, as shown below
Any help would be appreciated. Both text and image are part of table. Is there a way to make sure they stay within table boundaries, so they stay overlapped?
You need to align the image on the top in <td> element, because its default is middle. That is why it is being aligned that way and giving space above and below.
So, add vertical-align: top to <td> element.
td {
vertical-align: top;
}
I found several questions addressing similar problems, but each solution has a particularity that prevents it from applying to this situation...
My issue is that I want an absolutely positioned, 100% width, div inside a table cell. I can't use fixed widths or heights anywhere because all the content can vary in width and height. I want the div to be positioned from the bottom of the cell height, which is influenced by the (variable) height of the content in the next cell.
The code below works fine in IE8 (yeah, still have to support it...), IE11 and Chrome — the red div stays contained within the left table cell. In Firefox however, the div is actually sized according to the width of the TABLE, covering part of the cell on the right.
What can I do to make it work in Firefox?
Demo: http://jsfiddle.net/AGYGH/
HTML:
<table id="OuterTable" border="1">
<tr>
<td id="TableCell">
<table id="InnerTable" border="1">
<tr>
<td>Dummy text of varying length</td>
<td>Dummy</td>
</tr>
</table>
<div id="AbsoluteDiv">
<div id="InnerDivLeft">Left Div</div>
<div id="InnerDivRight">Right Div</div>
</div>
</td>
<td>
<select multiple="multiple" size="10">
<option>Varying length options</option>
</select>
</td>
</tr>
</table>
CSS:
#OuterTable {
position:relative;
}
#TableCell {
vertical-align:top;
position:relative;
}
#AbsoluteDiv {
background-color:red;
position:absolute;
width:100%;
bottom:30px;
}
#InnerDivLeft {
float:left;
}
#InnerDivRight {
float:right;
}
I've ran into this problem as well. According to the spec, table cells cannot be positioned. Meaning FireFox is doing it right, and everyone else is doing it "right".
Kinda hacky, but you could always use div's with "display: table-cell" THEN position them relative.
This article has a good JS alternative for the issue.
Thanks to Seth for pointing me to the JavaScript solution, which has the added benefit of also fixing small padding/margin issues on IE in my 'real world' usage.
So, I've wrapped the entire content of <td id="TableCell"> with a <div class="wrapper"> (as suggested by Hashem) and used jQuery to size its height to the actual height of the table cell:
$('#TableCell div.wrapper').height($('#TableCell').height());
Revised Demo (with the added wrapper colored blue) : http://jsfiddle.net/AGYGH/9/
I have a table with two columns. The first (which contains a menu) should have a
fixed width, while the second (containing some page content) can vary in width. The table should overflow the window (which it doesn't by default), because otherwise the browser reduces the width of the menu column if the content is very broad. But I cannot define a fixed width for the table (causing it to overflow) because I don't know the width of the content.
Overflow:scroll
does not seem to work with tables. I would be thankful for workarounds/solutions.
<table class="rootTableContent">
<tr>
<td id="rootTableMenu">
</td>
<td id="rootTableContent">
</td>
</tr>
The solution to this problem is to use proper CSS (Divs/Spans, etc) to layout your website as opposed to tables. I'm all for using tables to display tabular data and you'll see me arguing for them in places that they're valid, but this is not one of them.
This is easily done with something like this:
<div style="float:left; width: 150px">
Navigation Code Here
</div>
<div style="float: left">
Other Content Here
</div>
<div style="clear:both"></div>
Obviously, I'm oversimplifying this solution, you're going to have more specific code to deal with your layout (need more detail to help more specifically) But, it's important to use the right tools for the job.
As others have stated, please don't use <table> layouts. It's old, clunky, and confuses screen readers and other accessibility software.
If you absolutely insist on using your method, you can try this:
Live Demo
<style type="text/css">
div.wrap {
overflow-y: auto;
width: 75%;
}
div.wrap table {
border: 1px solid #000;
width: 100%;
}
div.wrap table td {
padding: 20px;
}
</style>
<div class="wrap">
<table class="rootTableContent">
<tr>
<td id="rootTableMenu">rootTableMenu</td>
<td id="rootTableContent">rootTableContent</td>
</tr>
</table>
</div>
In both IE8 and Firefox I am experiencing the following:
I have a panel that is 30px in height, within this panel I have a single row table with 30px in height. When it displays on the browser window the table does not fill the height of the panel (there is a small amount of the panel showing on the top and bottom. How do I correct this so that the table takes up the entire height of the table?
HEADERPANELTABLE CSS:
table.masterHeader
{
background-color:transparent;
border-collapse:collapse;
height:30px;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
padding:0;
display:block;
width:820px;
}
HEADERPANEL CSS:
.HeaderPanel
{
background-color:#0079d0;
height:30px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top:0px;
padding:0;
width:820px;
}
SPACER CSS:
div.Spacer
{
background-color:transparent;
height:30px;
}
MAINPANEL CSS:
.MainPanel
{
background-color:#6699cc;
height:700px;
margin-left:auto;
margin-right:auto;
width:820px;
}
HTML CODE:
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div class="Page">
<asp:Panel ID="HeaderPanel" CssClass="HeaderPanel" runat="server">
<table class="masterHeader" cellspacing="0" cellpadding="0">
<tr>
<td class="Account"></td>
<td class="Name"></td>
<td class="Spacer"></td>
<td class="CompanyName"></td>
<td class="Logout"></td>
</tr>
</table>
</asp:Panel>
<asp:RoundedCornersExtender ID="HeaderPanelRounded" TargetControlID="HeaderPanel" runat="server" Radius="3" Corners="Bottom"></asp:RoundedCornersExtender>
<div class="Spacer"> </div>
<asp:Panel ID="MainPanel" runat="server" CssClass="MainPanel">
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</asp:Panel>
</div>
<asp:RoundedCornersExtender ID="rceMainPanel" runat="server" TargetControlID="MainPanel" Radius="3">
</asp:RoundedCornersExtender>
Have you looked at the page in something like Firebug, where you can look at each DOM element, see the attributes (like margin, padding, and so on). That way you might be able to see exactly where that extra spacing is coming from, and what styling attributes are being applied to each element.
set the cellspacing to 0
<table cellspacing="0">
<tr>
<td></td>
</tr>
</table>
You haven't posted code (HTML or CSS) or stated what browsers you are seeing this in, so difficult to know for sure. Some suggestions:
make sure your table has zero margins
make sure the panel doesn't have any padding
make sure cell spacing is zero
make sure some other element isn't blocking the table
make sure your css styling is not being over-ridden somewhere
If you don't have it already, you should install the Firebug addin https://addons.mozilla.org/en-US/firefox/addon/1843/ for Firefox. This makes it extremely easy to inspect the DOM and CSS styling applied.
Because an ASP:Panel breaks up the panel into div tags and with rounded corners it add anothe 1px border to the panel which is placed after the table has been placed. In order to fix this the table had to be placed within a div tag and float the div above the panel.
I notice that you aren't doing anything about your table borders. Could this be the gap you are seeing? If your borders have any width for any reason then they could be showing which might be giving you the effect in question.
I made a quick jsfiddle proof of concept based on what I assume your outputted HTML will look like in its simplest form. I'm not familiar with the RoundedCornersExtender control though and I suspect that is modifying the HTML of the main div.
http://jsfiddle.net/tAgp3/1/
You can see that this simplified form works but I assume that the rounded corners is trying to do some nasty tricks with embedding extra DIVs with background to do rounded corners. These could be what is causing your additional padding.
Again I ask if you can post the actual html outputted to the browser so we can see if this is the case or not.
I've got a site that I am working on that has greebles on the top left, top right, bottom left and bottom right corners. The full width of this is roughly 1100px. The actual content area is within the 960px layout.
I want the site to be properly centered right down to 960px, with the extra imagery disappearing out the right and left, but not causing any horizontal scrolling provided it is over 960px.
All four images are seperate files (can't really join them) and there is already a background image. Did I mention that they are added through CSS, rather than as in-file images?
Thanks!
Edit: This really has to work in IE6. Not my choice :(
You can use overflow: hidden in the CSS for your body tag (or whatever container tag you have your main content in) to prevent scrollbars. Some browsers allow you to constrain that just to horizontal or vertical content (-ms-overflow-x and overflow-x in your case, because you're dealing with the horizontal overflow; there are corresponding y styles). I think these are / are going to be part of CSS3, according to this link.
I'm sorry folks, but the only way I can see this working including IEs 6 and 7 is using tables.
Working example: Here
The "Greeble" text (I don't really know what a greeble is :) distorts the resizing somewhat, that'll disappear when the columns have background images only.
Issues: The columns need to contain something to be rendered by IE. The I built in will prevent the complete disappearance of the right and left columns. You will have to find a way around that, maybe with a 1x1 Pixel image or something. You will always have to have some content - even if just 1 pixel wide - in all columns.
Relies on: Tables with an unspecified width rendering the way they do. I think this is pretty reliable, tough.
Tested in: IE 5.5 and greater, Firefox
To anybody who dares downvote this because tables are evil: Find me a better, CSS-based solution that works in IE6 as well, and I will gladly remove mine.
HTML: No separation between markup and CSS, no semantics, just the working prototype.
<body style="margin: 0px">
<table style="width: 100%; height: 100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td style="background-color: orange; height: 50%; color: white">
Greeble top left
</td>
<!-- The content area -->
<td style="width: 960px" rowspan="2">
<!-- This is important, serves as min-width replacement. -->
<div style="width: 960px; text-align: center">
I will always be 960 pixels wide
</div>
</td>
<td style="background-color: blue; color: white">
Greeble top right
</td>
</tr>
<tr>
<td style="background-color: blue; height: 50%; color: white">
Greeble bottom left
</td>
<td style="background-color: green; height: 50%; color: white">
Greeble bottom right
</td>
</tr>
</table>
</body>
I think I've worked out a ludicrously simple way of doing it: Add an empty div for each corner element, position it relatively and then give it a negative (or high positive for the rhs) margin - seems to work in IE 6 too.
Thanks for all the ideas though.
Not sure if you solved this, but I think it is possible using background images. If you layer the images on top of one another, without specifying a width for their containing divs, you should be able to pull it off. Here's the basics:
<body style="background: url(body-bg.png);">
<div style="background: url(greeble1.png);"></div>
<div style="background: url(greeble2.png);"></div>
<div style="background: url(greeble3.png);"></div>
<div style="background: url(greeble4.png);"></div>
<div class="wrapper" style="width: 960px;">
<p>Main Content Area</p>
</div>
</body
I think you'd need to use a bit of JS to position each of the greeble background images depending on the size of the image and the viewport, but it should be possible.