Is there a way to create a page break from my html that is readable from docx4j xhtml importer?
Did you try CSS page-break-before: always?
Related
I've been creating a website in ASP.net using the default template in vs2010 with a Site Master.
I'd been getting strange results where an image with a span under it would not line up as they always had whitespace between them.
I spent hours looking at the markup and finally created a plain .htm file out of desperation and copied my html into it. To my suprise this actually worked so after another hour of comparing the differences I noticed that the template creates the site.master with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Whereas it creates the .htm file with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Can anyone explain the difference between Strict (Which causes errors in my layout) and Transitional (Which means the layout is as I expect) and if using Transitional in my aspx pages will cause me any future difficulties down the road?
I do have a warning in VS that states
validation (xhtml 1.0 transitional): element 'h2' cannot be nested within element 'span'
I guess this could be the source of the error when using Strict but I'm not sure how to get around it.
Edit: Here is the block in question that is causing the error
<a href="http://somelink.com">
<img src="Images/test.png alt="Test" />
<span class="Styling for hovering">
<h2>
Test
</h2>
<p>
This Is A Test
</p>
</span>
</a>
I'm trying to create a link that is activated by the image and the text below it. I want to hold the text in a container. That containers background will change when it's hovered over. I also set a fixed size for the span. This is the main reason I need some kind of container around them.
Regardless of which DOCTYPE you use you cannot place a block level element (<h2>) inside of an inline element (<span>). That's why you're getting that error. Since <span> is typically used for styling I suspect you could remove that <span> and use CSS to style the <h2> to appear however you desire.
The short answer?
Traditional = Allow old school deprecated HTML tags like <font>, <center>, <s> and be very forgiving about things in HTML that we're not supposed to do anymore.
Strict = Use css to replace most of those tags, and enforce the rules the way the W3C defines.
The long answer: You can read through the 25+ page specifications for each of the HTML spec types from the W3C, but if you're creating new pages you should probably try to stick to XHTML 1.0 Strict since it's the hip cool wave of the future and Transitional gives some graphic designers the heebie jeebies. :)
W3schools has a pretty good breakdown of what each type means more or less:
XHTML 1.0 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements
(like font). Framesets are not allowed. The markup must also be
written as well-formed XML.
XHTML 1.0 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like
font). Framesets are not allowed. The markup must also be written as
well-formed XML.
I am getting lots of trouble with IE. The whole page is disarranged even though I have reset applied to all the tags initially. Mozilla and Chrome displays it correctly but IE is giving lots of tension. If anyone could help I would be very thankful.
Jquery is also not working fine. and div are disarranged
First see it in mozilla to get a look of what I have designed. then open it in IE to see the troubles.
See it here http://www.crawller.com/opal/
Thanks to everyone.
I solved the problem by including this line at starting before
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This solved the problem and CSS and jquery codes are responding well in IE now.
You can check the modified version at
http://www.crawller.com/opal/new/
The old one is also available at http://www.crawller.com/opal/
For starters, it appears there are some incorrectly spelled attributes in your css, several references to 'bloc' where I assume you mean 'block'.
Make sure that your html and css validate.
You have a lot of Markup validation errors in your document. First try to fix those errors.
Check your site for w3c Markup Validation
Until recently, our app did not specify a doctype. Then, to make the app more cross-browser compatible, we added a strict doctype. This made everything behave a lot more similar across different browsers. However, in IE9, we noticed that this changes how select elements look. To make sure that was the only thing going on, I made an HTML page with the following:
<html>
<select>
<option>Testing</option>
</select>
</html>
This HTML is rendered like this in IE9:
Then I just add a doctype as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<select>
<option>Testing</option>
</select>
</html>
The HTML then renders like this:
There are some subtle differences, but the biggest one that stands out to me is the part of the dropdown where the down arrow is. One has a white background and the other is gray. Is there some kind of CSS standard that changes the style on selects? We'd like to keep it how it used to display, but I'm not sure if that's possible.
I tried doing the same test in FireFox and both the no doctype and strict doctype display with a white background for the down arrow. The same test for Chrome has both doing it with the gray background.
Is there any way to control this? Any information about this would be much appreciated. Thanks.
This is an unfortunate side effect of mixing native OS elements into the page. The best way top deal with it in my experience is to completely re-style the element. The older the browser and more browsers you support the more difficult this becomes as they all have subtle differences. Here are a couple pages to get you started with styling these elements.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
http://bavotasan.com/2011/style-select-box-using-only-css/
Maybe look in to using YUI Reset to clean any browser stylesheets from your page first?
http://developer.yahoo.com/yui/reset/
Lack of a doctype puts you into quirks mode where you never want to be. A doctype is required of all modern web pages in order to be in standards mode. In quirks mode, the proper box model is not followed, particularly by IE, and all sorts of strange things can occur. This is why a doctype is always the first thing to be put on every web page. And once it is set, you never ever change it.
These elements are not supported in HTML 5 but are supported in XHTML:
acronym big tt
In the future, when I will change my doctype to html 5, then will I not need to replace or change any code to pass validation?
this is also accepted as valid code in an attempt to ease the pain for avid XHTML coders (like myself) who are used to self-closing elements:
<tag type="type" id="name"/>
The same rules apply to <meta> and other self closing elements.
Is it a good idea to avoid HTML 5 unsupported tags, If I am using XHTML 1.0 Strict now?
Yes, it would be a good idea to plan ahead for HTML5 support. Check here for a list of deprecated tags and attributes to avoid.
As far as XHTML syntax (always closing tags, self closing tags, etc) you can continue to use that without worry. HTML5 can be written using standard HTML syntax or XHTML syntax, though it always remains just HTML.
When slicing and saving for web in Photoshop CS4, the HTML layout output by Photoshop is done using tags, which is not what we want. Is there a way to get Photoshop to output W3C compliant tableless XHTML with CSS?
Alternatively, is there another application that I can use to slice to W3C XHTML?
I'm going to answer my own question here, actually, this following URL is going to:
http://www.adobe.com/devnet/fireworks/articles/fireworks_web_design_css.html