I have a frame-set and each frame has a table with width:100%. In IE 8 and 9, the table does not fill the whole window, but instead has a strange right margin. In all other browsers it worked fine.
I confirmed that it is not related to margin/padding and is to do with scrollbar because if I change the scrollbar width in the control panel, the reserved space changes too. If the page is viewed outside of frame this problem will not happen.
This is lagacy code. Each frame has scrolling=auto. From the internet I saw two related discussions:
vertical scrollbar problem in IE
Reserved space for vertical scrollbar in IE
However I still can't find a solution. Adding scroll=no to the body of the page will eliminate the space, but this prevents scrollbar from showing when needed. I tried a few other solution but can't find a fully working one yet.
EDIT: This only happens in vertical split frame.
Sample Code:
index.html
<html>
<frameset rows="150,*" cols="*" framespacing="0" border="0" frameborder="no">
<frame scrolling="auto" noresize src="top.html" name="menu">
<frame scrolling="auto" noresize src="bottom.html" name="main">
</frameset>
</html>
top.html
<html>
<body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgColor="#AAFFAA">
<table cellspacing=0 cellpadding=0 width="100%" border=1>
<tr>
<td width="100%" align=middle>TOP<td>
</tr>
</table>
</body>
</html>
bottom.html
<html>
<body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgColor="#FFAAAA">
<table cellspacing=0 cellpadding=0 width="100%" border=1>
<tr>
<td width="100%" align=middle>bottom<td>
</tr>
</table>
</body>
</html>
Sorry i cant comment under the question.
Did you try to replace the scrolling with an oveflow?
try adding a style overflow: auto: or overflow-x: auto; overflow-y: hidden;
Related
I have a frameset like below in the code. I want to set minimum width for the frame "frmMView". Frame "frmMView" is resizable, but it should be resizable only to a minimum value.
<frameset ID=frmDefault name=frmDefault COLS="250, *" BORDER=1 FRAMEBORDER=1>
<frameset ID=frmHeader name=frmHeader ROWS="400,18" BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>
<frame ID=frmMView name=frmMView SCROLLING="auto" SRC="Menu.htm" width="100">
<frame ID=frmMSearch name=frmMSearch SCROLLING="no" SRC="Search.html">
</frameset>
<frameset ID=frmDetail name=frmDetail ROWS="0, *" BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>
........
........
</frameset>
</frameset>
I tried giving minimum width "min-width" to the frame. And also tried adding in css below configuration.
.container {
min-width : 100Px;
width : 100px;
width: auto !important;
}
But it did not work
I hope you solved this because you asked this two years ago, but you never included a class in the tag since that's how you wrote your CSS. Also, setting a min-width as the same as a fixed width is redundant since the width won't change.
<frame ID=frmMView class="container" name=frmMView SCROLLING="auto" SRC="Menu.htm" width="100">
I'm creating a simple web page using only HTML (so I don't use CSS or anything else) and I want to create an iframe in the horizontal center of the page. This is the code
<body>
<iframe height="200" width="800" src="http://www...." align="center" frameborder="0"></iframe>
<!other stuff>
</body>
If the alignment is setted as "right", the iframe appears on the right, but if it's setted as "center" (as it is in the code) it appears on the left, as it happens when the alignment is "left".
Thanks to everyone who can help.
Include the iframe in a div with align="center" like this:
<body>
<div align="center">
<iframe height="200" width="800" src="http://www...." frameborder="0"></iframe>
</div>
</body>
Check on this JSFiddle that it is on the center.
UPDATE
As Quentin has mentioned in his comment bellow, the use of align="center" is obsolete in HTML5. As an alternative you can use style="text-align:center" like this:
<div style="text-align:center">
<iframe height="200" width="200" src="http://www...." frameborder="1"></iframe>
</div>
Check this updated JSFiddle.
here is an working code using flex
<body style="display:flex;position:relative;margin:0; justify-content: center;">
<iframe height="200" width="200" src="https://www.w3schools.com" frameborder="0" ></iframe>
</body>
Fiddle link
I need some compatibility help. My website looks different in browsers. Chrome/firefox, etc. looks right but IE is messed up. Take a look at: http://southwestarkansasradio.com/joomla
I'm using Joomla 2.5. The search box is moved to the left and my on air box script does not work in IE. Code is below, can you help? thanks.
<table border="0">
<tr>
<th>
<center><img style="float: left;"
src="http://www.southwestarkansasradio.com/images/onair995.jpg" alt="" height="35"
width="316" /><br><img
src="http://www.southwestarkansasradio.com/images/playerbackground.jpg" width="316"
height="216" alt="" border="1"><div id="now playing" style="position: absolute; top:
60px; left: 20px;>
<!--[if IE]>
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying"
style="height:216px" "width:316px" frameborder="0" scrolling="no" border="none"
allowtransparency="true" valign="top" ></iframe>
<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying"
style="height:216px" "width:316px" frameborder="0" scrolling="no" border="none"
valign="top" ></iframe>
<!--<![endif]-->
</div></center>
</th></tr></table></div>
That html is really hard to read for such a small piece of code. Using indentation would make it easier for you to spot mistakes. There were a number of things wrong:
the opening div was missing from the snippet
One of the divs "now playing" has a space in the id. One cannot have spaces in HTML IDs.
you should have a trailing slash in the br tag
you haven't closed the css style in the nowplaying div, i.e. you forgot the closing apostophe. This would cause problems.
iframe does not have a valign property
the height and width in the iframes are badly formed
iframes do not have a border property
Something like the following should serve better but without being able to debug on your server it's guesswork. Anyway, as said I've kept it pretty much to your structure and fixed fixed the obvious stuff but there will probably still be some issues when you try it on the site but it will get you closer. I certainly wouldn't do it this way however.
The w3c validator is a handy tool.
<div>
<table border="0">
<tr>
<th>
<center>
<img style="float: left;" src="http://www.southwestarkansasradio.com/images/onair995.jpg" alt="" height="35" width="316" />
<br/>
<img src="http://www.southwestarkansasradio.com/images/playerbackground.jpg" width="316" height="216" alt="" border="1">
<div id="nowplaying" style="position: absolute; top: 60px; left: 20px;">
<!--[if IE]>
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying" height="216px" width="316px" frameborder="0" scrolling="no" allowtransparency="true" ></iframe>
<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying" height="216px" width="316px" frameborder="0" scrolling="no" ></iframe>
<!--<![endif]-->
</div>
</center>
</th>
</tr>
</table>
</div>
This is just a hack but to move the search box in IE8 and IE9 (haven't tried IE7) add the following to the head section of your template's index.php. It's just "pushing" the search box over.
<!--[if IE]>
<style type="text/css">
div.topmenu
{
width: 250px !important;
}
div.search
{
margin-left: 30px !important;
}
</style>
<![endif]-->
I have a rich HTML email. I was wondering how, in Outlook 2010 and 2007, you get the table in the layout to sit flush with the edge of the browser?
Have a look at this pic:
The pink is the background color of the body tag and the grey is the bg of the table. They both have 0 everything (margin, paddting ect). But there is still some space. The pink should not be visible.
Does anyone know how to get rid of this space on the body?
Also here’s some CSS for the start of the email:
<html>
<head>
<style type="text/css">
html, body{ width:100%; }
body{ background-color:#ff00ff; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body topmargin="0" style="margin:0; padding:0; width:100%; background-color:#ff00ff;" >
<table topmargin="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;border-spacing: 0;border: 0; margin:0; padding:0; background-color:#eee;" >
Cheers!
Outlook 2007/2010 adds 15px top/bottom and 10px left/right body padding to all html emails. You can't get rid of it.
Here's a trick to fake full backgrounds: http://www.campaignmonitor.com/forums/viewtopic.php?pid=17048
Outlook uses the broken Microsoft Word HTML engine and is not based on any reasonable resemblance to a browser.
If you have Word, you can at least open your email as html and see how it renders it without having to go through the whole mail cycle.
Outlook really in the bane of any email marketer. It is an absolute pile of crap and fails to support even the most basic CSS expectations.
I'd have to have many frank and disappointing discussions with graphic designers over the limitations of email as a platform due to Outlook. Microsoft has seriously made a step backwards in using the Word engine for Outlook.
Stange that the <body style="padding:0px; margin:0px;"> doesn't work.
I find that with outlook 2007/2010 that if you have padding-top applied to a column but not the other columns in the same row Outlook will apply that padding to all the columns for some reason. Are you able to paste more of the email code so we can have a look that its not something else causing the issue.
Try using margintop="0" marginleft="0" marginright="0" on the <body> tag (updated to full example):
<html>
<head>
<title>Title Tag</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body margintop="0" marginleft="0" marginright="0" bgcolor="#ff00ff">
<table width="100%" cellmargin="0" cellspacing="0" border="0"><tr><td width="100%">
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td width="600">
</td></tr></table>
</td></tr></table>
</body>
</html>
You will need to set the width of 600 to whatever the width of your email is.
There are cross-email client bugs with body tags, and padding/margin values in CSS.
NB - this is only necessary, and only works, on the body tag.
With pure CSS (I'm not sure the makers of IE like reading that), you can use !important to force the margin and padding of the <table> and the <body> to be 0px:
html, body
{
margin: 0px !important;
padding: 0px !important;
}
table
{
margin: 0px !important;
}
Maybe it'll work, but maybe not. I'm not sure how Outlook handles CSS...
As outlook doesn't support margin -reference. My work around to this issue was as below. Hope it will help someone.
<table cellpadding="0" cellspacing="0" border="0" style="width:100% !important; margin:0; padding:0; background-color:#ffffff; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<!-- SECTION:TOP -->
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_03.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_04.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_05.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_06.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_07.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_08.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
I know this is a bit late, but I came across this post and thought you might be able to test this method as well.
http://theboywhocriedfox.com/code-snippets/fixing-the-forced-body-padding-in-outlook-2007-2010-and-2013/
"Fixing the forced body padding in Outlook 2007, 2010 and 2013
Testing a html email recently with a high percentage of recipients
likely to be users of Microsoft Outlook I came across a bug where it’s
not possible to overwrite the forced body padding in versions of
outlook (which use MS Words rendering engine 2007, 2010, 2013).
This was breaking the design and causing unwanted whitespace on the
left margin of the email. The offending versions of outlook support
margin (including negative margin) but only support inline styles. So
the fix/hack is to wrap the entire email in a wrapper table and apply
negative margin to just the problematic email clients – using html ‘if
statements’ as below."
<!--[if !gte mso 9]><!---->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--<![endif]-->
<!--[if gte mso 9]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:-10px;">
<tr>
<td>
<![endif]-->
<!-- YOUR CONTENT HERE -->
</td>
</tr>
</table>
I'm trying to create a relatively simple page with a that is on the left side, taking up the whole height of the browsers window, with a fixed width (say 200px), and then an that uses the rest of the window width, and also the whole windows height. I want to use CSS to do it, no javascript. I don't mind wrapping the in a if I have to.
<html>
<head>
<style type="text/css">
body{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" height="100%" width="100%">
<tr>
<td style="min-width: 200px;" bgcolor="#333333">
</td>
<td width="100%" bgcolor="#666666">
</td>
</tr>
</table>
</body>
Now what I should say is that I have only tested this in Firefox and Safari (mac user) so I don't know how it will look in Internet Explorer etc, but feel free to try it, this should give you what you want :)