I have a styling issue on our company's intranet that I can't figure out. It only happens with IE8 or lower. IE 9/10, FF, Chrome, Safari and Opera are all OK.
The issue is a border and paddings are appearing even though I've used border:none;, margin:0!important; and padding:0!important; and it's pushing the content inside over to the right and causing a horizontal scroll bar to appear.
This is where it gets confusing...
Our intranet (asp) has the "panels" that you can see in the screenshot above. There is a "Custom HTML" panel that will allow me to insert HTML into the SQL database cell for that panel, but to view a complex html, it's best to store a file.html page and pull it into the panel using an iframe. I can supply the iframe reference and the css using in my file.html... which one is the most likely culprit?
iframe reference in SQL database:
{top|Members,Forum,HTML($$Summit 2013 Information$$<iframe src="http://www.myexternalsource/WORKING_FOLDER/Summit2013/Summit2013.html" width="768" height="1926" style="border:none!important; margin:0px!important; padding:0px!important;"><p>Your browser does not support iframes.<br /><br />Click here to open in a new window</p></iframe>)}{middleLeft|}{middleRight|}{bottom|}{hidden|Announcements,Items,Tasks,Collections,WhatsOn,Activity,RSS,QuoteOfDay,Absentee}
Summit2013.html with irrelevant styles and html removed
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#iframe-wrapper {
display: block;
width:760px;
padding:0px;
margin:0 auto;
}
...
</style>
</head>
<body style="margin:5px 0 0 7px !important;">
...
<iframe frameborder="0" ...></iframe>
Margins IIRC you can define in the inner page.
Related
The question is very silly but I've never created a webpage so please do not immediately downvote. AND please don't tell me to watch totorials, I really need to do something like described below only once. For some reasons, I need to make a really simple webpage, containing only a background picture and a CSS3 heart animation I found around. I need the CSS heart animation to be postioned on the left corner with a 100px margin from bottom, overlaying the other image I use as background What do I need to add to HTML to achieve that?
my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test page</title>
</style>
</head>
<body/>
<center><img src="sbg.jpg" width="1280" height="800" alt="bg" /></center>
</body>
</html>
And the CSS I'm trying to use
SO has very poor CSS formatting so I added the CSS code to pastebin.
Please note that I never worked with CSS and need a detailed explanation. Thanks.
Create a
<div id='bigwrapper></div>
and style it with
#bigwrapper{
width:100%;
height:100%:
}
and the picture of your heart in there. After that, apply the needed CSS
The HTML markup needs work, because without properly formatted tags, several things may not work. You need to open and close tags properly.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test page</title>
<style></style>
</head>
<body>
<center><img src="sbg.jpg" width="1280" height="800" alt="bg" /></center>
</body>
</html>
The center tag has been deprecated in HTML5, and the transitions you are using only work with HTML5 and CSS3.
I want to make frozen layout in a website template, but I have problem in Internet Explorer.
I make like this
<div id="NewsBlock">
<div id="aboutUs">
<h1></h1>
<span class="OpenDayBanner"></span>
<p>You can replace the paragraph above with some text describing your FAQ system. Here's an example: If you have questions about our web site, our products or our services, there’s a good chance you’ll find the answer here</p>
</div>
</div>
For CSS I make like this
div#NewsBlock{
min-width: 1300px; //this work for Firefox and chrome
width:100%;
overflow: hidden;
height: 510px;
background-image:url(../images/aboutstartupbg.png);
background-repeat: repeat-x;
}
Using the min-width and percentage value for width make the layout frozen in Firefox and Chrome but it doesn't work in IE!! Any suggestions please
You have to define the min-width property of the <p> element.
Example:
p.myClass {
min-width: 420px;
}
The problem is solved by changing the dtd of the HTML to XHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ">
to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Use a strict doctype, such as <!DOCTYPE HTML>, to make sure IE is rendeing correctly.
Also consider adding <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to the <head>.
I have an element with a width 200px.It has a left and right padding of 100px each. In IE7,IE8 and firefox 4,it appends the padding to the elements width.However, In IE Quirks mode, the padding is not appended and the width remains 200px.How can I fix this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#t1{float:left;border:#000 thin groove;width:200px;padding:10px 100px 10px 100px;}
</style>
</head>
<body>
<p id="t1">This is child 1</p>
</body>
</html>
By not using quirks mode. Quirks mode uses a broken box model, so this is expected behavior of that rendering mode.
You're already using standards mode with a proper doctype declaration; what's causing quirks mode to be triggered on IE?
I'm working on a project where I need to make a Flex application that fills the entire browser window (note that I mean that the toolbars should be visible and all that even if I say fullscreen).
To develop the SWF I'm using FlashDevelop (for the first time) and I'm stuck. When I build the project it displays no error and a file website.swf is generated. When I browse to this file with Firefox, it displays what I want and in fullscreen. However when I go to the generated index.html I get a white horizontal bar at the top of my screen (again the browser window).
I've looked around a bit on the internet and found several people suggesting that the CSS should include stuff like:
<style type="text/css">
html, body { margin:0; height:100%; overflow:hidden; }
body { margin:0; height:100%; width:100%;}
</style>
But that didn't cut it for me, I still have the white bar. I've tried margin, top, width, height and border so far, nothing seems to work.
Other tutorials show how to make an SWF fullscreen as in the Firefox F11 equivalent, which is not what I want (and it still displays the annoying white bar when I press F11 :().
EDIT: Additionally when I place an extra line above the "altContent" div that says "Blub", this line will be displayed in the white bar.
For completeness, the HTML, since I expect this to be the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var flashvars = {
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "#FFFFFF"
};
var attributes = {
id:"Website"
};
swfobject.embedSWF("Website.swf", "altContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<style type="text/css">
html, body { margin:0; height:100%; overflow:hidden; }
body { margin:0; height:100%; width:100%;}
</style>
</head>
<body>
<div id="altContent">
<h1>Website</h1>
<p>Alternative content</p>
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
The HTML and CSS look fine. I've just tested it with Firefox 3.6 and Flash Player 10.1 as well as the latest version (2.2) of swfobject. The displayed SWF fills the browser window completly. There's no white bar on top of the SWF.
Try upgrading to the latest version of swfobject in case you are still using an older version.
BTW: You can remove the second line of your CSS. That's redundant.
I am trying to design a form that uses the CSS inline-block display value for a table-like arrangement. I know that some browsers including Firefox 2 don't know how to handle it, so I used this method to make it work in all browsers. However, sometimes when I try it in Firefox 2, the browser freezes. My CPU usage gets stuck near 100% and sometimes the memory usage rapidly increases to a huge value. Does anyone know why this is happening or how to work around it? Here is a simple example of a page that shows this problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>-moz-inline-stack test</title>
<style type="text/css">
div {
display: -moz-inline-stack;
}
</style>
</head>
<body>
<div>
<input type="radio" name="test" value="yes">
<br>
<input type="radio" name="test" value="no">
</div>
</body></html>
It works fine in Firefox 3 but it freezes Firefox 2. The <br> tag is not necessary for the bug but it keeps the inputs from being on top of each other.
try this instead
div {
display: -moz-inline-box;
display: inline-block;
}