On this site I'm gonna offer this Xmas to my brothers-in-law, I have a page structure like this:
<body>
<div id="container">
<div id="menu">[...]</div>
<div id="wrapper">
<div id="section1">[...]</div>
<div id="section2">[...]</div>
etc etc etc
</div>
</div>
</body>
All looks perfect on Firefox... but on my IE9, the page isn't aligned and the #font-face isn't loading either...
The CSS goes like this (looks to me there's no problem here)
#container{width:960px;margin:0 auto;position:relative}
#wrapper{width:780px;float:right;margin-bottom:30px}
#menu{width:180px;float:left;background:url(../img/site/menu_bg.jpg) repeat-y right;height:100%;position:fixed;padding-top:55px}
Already tried a different set-ups with no change at all ... and I'm starting to rip my hair off here ... any suggestions?
Thanks in advance.
PS: If it helps ... the page in question is: www.sweetdreams.pt/escondido.php
EDIT: As requested ... this is the beggining of the code in the page:
<?php if(!ob_start("ob_gzhandler")) ob_start(); ?>
<!DOCTYPE html>
<html lang="pt-PT">
Are you by any chance running IE in Compatibility Mode? (check this by pressing F12 and looking at the Developer tools below in the browser window.
EDIT:
In IE, it pays to have a DOCTYPE declaration, otherwise it will just go to Quirks mode.
Please do post full HTML source.
The document type declaration must be at the very first line in the file, otherways it's ignored. It also must not preceeded by any characters, i.e. no blank lines, spaces, tabs, nothing, just <!DOCTYPE html>.
instead of { margin: 0 auto; } try...
#container {
position: absolute;
left: 50%;
width: 960px;
margin-left: -480px; /* half of width */
}
Related
I tried to generate a PDF-file from a HTML/CSS-document by using the api of pdflayer.com. So far so good. everything worked fine. But there is one issue. If there is a page break, a line sometimes gets split like in the photo:
is there a way to get rid of this issue? I also tried html2pdfrocket.com it is the same there.
The text is placed within this html-construct:
<html>
<body>
<div class="overall">
<div class="content">
<div class="wrapper">
<div class="article">
Text
I found out that there exists a problem with compiling the content inside of multiple divs. CSS-rules did not affect the behaviour of the issue.
So I had an idea and what I made was to generate a "raw-html-output". In this html document is only
<html>
<head>
<style>
The only necessary css-rules.
</style>
</head>
<body>
Some text here.
</body>
</html>
Nothing more.
The API grabs the data from the simplyfied html-file and compiles them well.
i think the best solution would to prevent a break inside a paragraph on print.
Something like this:
#media print and (min-width:700px) {
/* you can change the selector to whatever you need */
.article {
break-inside: avoid;
page-break-inside: avoid;
}
}
If you use firefox, open the html doc with it and install the add-on named PDF Mage. Just click the icon to convert the page to PDF.
It always works for me without any problems.
Viele Grüße
You can try converting your HTML to PDF using the Syncfusion online demo. We are handling text and image split across the pages.
Note: I work for Syncfusion.
I wasn't too sure how to word the title as its a rather obscure issue.
Essentially if you go to http://www.discovertheplanet.net click on one of the 3 boxes and if you are on firefox you will see the issue. If you view on IE or Chrome the menu on the left hand side is in the correct position, however on Firefox it starts way down the page.
I have viewed the console and there were a few CSS errors referring to the bootstrap.css. I have been on the Bootstrap website for known issues with firefox but there was nothing relevant.
My HTML for the main are where the menu is:
<!-- Main Body Area -->
<div class="main-container-notes">
<div id="left-box">
<?php
echo "<div style='width: 100%; display: table;'>";
while( $noteName = sqlsrv_fetch_array( $resultNotes, SQLSRV_FETCH_ASSOC))
{
echo "<div class='hvr-bounce-to-right1 hover-cursor' style='width: 100%; border-right: 5px solid #00AA88; height: 50px;'>" . $noteName['NoteName'] . "</div>";
}
echo "</div>";
?>
</div>
<div id="right-box">
</div>
</div>
<!-- End Main Body Area -->
Ive just included my whole CSS File here so you can see all the classes
There is one for the Animations and One for General Styles
Like i said its rather obscure and im not sure what extra info you require,
Please just ask and i can provide you with it.
So i ask, why is this only happening in Firefox?
the .main-container-notes height is causing this
try removing it
Try to add this code:
#left-box {
vertical-align: top;
}
In my firefox it resolved your issue =) And this solution allows you to keep the height of .main-container-notes 1000px or whatever you want
What is the correct way to put Header and Footer in CSS 3 ?
I am reading up on http://www.w3.org/TR/css3-gcpm/ and I would like to know if the below is the correct interpretation of how to use running elements .
Running elements has the property of being shifted from the normal "flow" of the document and headers and footers need that .
That is the significant part I am trying to achieve and , otherwise there is a string-set attribute which can be used to name a section and use it elsewhere int he page margins .
I am also curious if 3rd party implementations support them ? I know of some similar markup's in some tools but I want to know if this is what CSS is trying to mean?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Testing</title>
<style type="text/css">
div.header {position: running(header)}
div.footer {position: running(footer)}
#page{
#top-center {content: element(header)}
#bottom-center {content: element(footer)}
}
</style>
</head>
<body>
<div class="header"> HEADER </div>
<div class="footer"> FOOTER </div>
<div>
Normal Text
</div>
</body>
<html>
http://jsfiddle.net/VubtS/ - But of-course browsers won't display that since it is for paged media .
I am trying this in some HTML - PDF convertes to see how much they comply with CSS 3 but apparently none of them renders this . Is my markup correct as per the Css3 definition ?
I believe that your syntax is correct. However I am also not seeing browser support for it yet. Most of the commercial HTML to PDF tools I have looked at (Winnovation, DynamicPDF, EvoPDF, RasterEdge, wkhtmltopdf and more) use WebKit or another layout engine that does not support CSS3 Paged Media.
I think these do though ...
Prince (It uses it's own layout engine PrinceXML)
DocRaptor (It uses PrinceXML as a webservice)
RealObjects
Antenna House
Just to confirm #theChrisMarsh's answer, the syntax is correct.
I have direct experience with Flying Saucer which, although otherwise only supports CSS 2.1, includes support for CSS-3-style running elements for paged media. Browsers of course don't do anything with it because they are #media print although it might be different if you try to print (but e.g. Firefox print preview is awful as of FF 27.0).
I've always understood it that <header> should go at the top shortly after the opening of the <body> tag and <footer> should go at the bottom just before the closing of the <body> tag. Their positioning depends on how you want to lay out the site.
EDIT: First of all, sorry for not pasting the link directly. Secondly, thank you ALL for the help, everything works now. Thank you Manoz especially for pasting my code and fixing it. This website is magical, I've been trying (and failing) to make my code work all day yesterday, so I thought to give this website a try and got much more help than I expected. THANK YOU!!
I'm an amateur programmer in school, having a lot of trouble with div id. Here is a link of how my code looks like:
http://convert.neevia.com/docs/e7416408-ff15-4c01-954c-603bfd1ce941/test11.jpg
The problem I'm encountering here is that anything from #title to #footer is not showing up in the browser. In other words, it is not linking any id (such as #title) to the HTML code .
I would really, really appreciate some help. Thank you very much.
<!Doctype html>
<html>
<body>
<head>
<style type="text/css">
div{
border:solid 2px;
margin:5px;
padding:5px;
color:green;
}
#title
{
height:150px;
}
#menu
{
width:150px;
float:left;
height:450px;
}
#mainarea
{
margin-left:180px;
margin-top:10px;
}
#content
{
}
#footer
{
height:30px;
text-align:right;
}
</style>
</head>
<body>
<div id="title">
<p>The title</p>
</div>
<div id="menu">
<p>the menu</p>
</div>
<div id="mainarea">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html
Changes are being appeared when I change anything from #menu to #footer in CSS.
If Tony Barnes's idea didn't work (which you should try), you might just not be saving the file before you refresh your browser.
I see nothing wrong with your code. Until you post it in your question (https://meta.stackexchange.com/questions/22186/how-do-i-format-my-code-blocks) I'm not going to try it out, but it could be a caching problem. Ctrl+Shift+R (Win) Cmd+Shift+R (Mac) to refresh the page with a new cache. I noticed that you're using Dreamweaver. Don't. Especially do not use it's preview option. There are many better (free) text editors.
Caching probably isn't an issue though because it's all inline CSS.
The issue for me, is just that there is a cache file that is present in the browser. I had the same issue, so I had to remove that using CTRL + F5.
Otherwise, what does the red line means in the code? Does your text editors shows the error when you hover over to it? I am sure it would help you.
Third thing would be, to check the Html Inspector from your browser. To check that press F12, I am sure you will get the styled properties there, this way you will get to know which properties are being applied.
If the updated ones are not present in the Browser, then the cache is the issue. If they are being overridden then you will also know how!
Ok I'm trying to debug my layout and see why it's all funky in IE8 and below.. well when I start observing the code, I realize all the wrapping elements of inner elements are self closing themselves.
<section id="top-bar"/>
<div class="container">
<div class="row">
<div class="span12">
<p>ELEMENTS</p>
</div>
</div>
</div>
<div class="rivets"/>
</section/>
Well I have styling applied to the #top-bar in my CSS:
#top-bar {
background: #146c7e url('../images/top-bar-bg.png') repeat top left;
color: #fff;
}
So in IE8 and below that style is not being applied. This is absolutely frustrating. This only happens to me in Magento.. All my other layouts I did on my own never self closed themselves if content wasn't directly inside of them.
Ok people thought I was self adding those ending tags, but here is my code:
<section id="top-bar">
<div class="container">
<div class="row">
<div class="span7">
Shoppe
Local
Half Baked
</div>
<div class="span5 mag-links">
<?php echo $this->getChildHtml('topLinks') ?>
</div>
</div>
</div>
<div class="rivets"></div>
</section>
IE8 is adding those tags AUTOMATICALLY. I can't delete them.. hence the code works great in Chrome, Firefox, IE9 and up.. But IE8 and below, it starts that self-closing stuff. I NEVER had this problem before.
I think this is happening because IE8 does not support HTML5 tags, like section. If you want to get this to work in IE8, call the following in the head of your document:
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('hgroup');
</script>
<![endif]-->
This tells IE8 to create these elements, and it should be able to recognize them as HTML elements afterwards.
I know you have marked the correct answer in this specific case but this may help others:
When I have these issues I open the page in Firefox, click 'View page source' and then inspect this for any red elements. This shows any code which is not closed properly (usually a missing </div>) and points out where it has tried to fix it for you.
Modern browsers try and close incorrect code automatically which can be annoying, as you only realise something is up when a client points it out in an old version of IE!
Hopefully this helps someone else who thinks their problem is similar.
Your #top-bar element doesn't contain the other elements, so you can't see a background of an element that doesn't have any size.
Change this:
<section id="top-bar"/>
to:
<section id="top-bar">