CSS - Is There A Css Quivalent To The Word Break <wbr> Tag?

Hi,

I'm trying to get my XHTML/CSS site to run on a variety of browsers. Right now it works in all my target browsers except IE 5 Mac (untested on IE 5 PC). The problem, as you'll see below, is that the page header ("Web design") isn't put on a separate line from the navbar as it is on Safari, NS, Mozilla, FireFox, OmniWeb, etc. Can anyone help me come up with a solution to this?

The page is he http://kazezb-1.res.carleton.edu/~ben/

Ben

The question is "what effect will page-break-after have on screen media"?

Am I correct when I say that it will have no effect? I believe that page-break-after only affects print media, but I have poor reading comprehension and would just like to double check.

I am wondering if it is possible to include a line break within the content area of the :after pseudo element. I would like to create a class that adds text following an image, i.e.

.click_for_larger:after {
font-size: 0.8em;
content:"<br />- Click for larger version -";
}

Of course, in this example the "<br />" would be printed. Is there any way to indicate that there should be a line break before the text is displayed?

Cheers -

george

Question for the CSS gurus:

I have a site that is listing several steps to complete a process, and each step is displayed in a table. The problem is that IE6 (I believe my workplace uses 6, anyway) doesn't want to break it properly - at times it breaks it in the middle of the tables.

I don't want to manually enter the page breaks each time (as I know I can do with page-break-xxx: always), because future updates may be done by someone who has absolutely no coding experience.

Any thoughts on how to achieve what I'm looking for in IE6?

Thanks!

How do I create two div blocks that lay side by side from each other?

Right now I have two "column" divs (one left and one right), and separate "box" div that contain the content.

CSS:

Code:

div#frame
{
width: 40%;
    margin-top: auto;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
border-style: solid;
border-width: 5px;
border-right-color: black;
border-bottom-color: black;
border-left-color: white;
border-top-color: white;
}
div#title
{
width: 100%;
background-color: black;
color: white;
}
div.box
{
width: 100%;
border-style: solid;
border-width: 5px;
border-right-color: black;
border-bottom-color: black;
border-left-color: white;
border-top-color: white;
}
div#left
{
width: 45%;
}
div#right
{
width: 45%;
margin-left: 50%;
}

HTML:
Code:

<div id="frame">
        <!--------------------------->
        <div id="left">
        <div class="box">
        <div id="title">NEWS</div>
        fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
        <div class="box">
        <div id="title">RECENT GAMES</div>
        fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
        </div>
        <!--------------------------->
        <div id="right">
        <div class="box">
        <div id="title">NEWS</div>
        fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
        <div class="box">
        <div id="title">RECENT GAMES</div>
        fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
        </div>
        </div>

Link: http://mushsauce.110mb.com/art.html

Can anyone confirm this? It seems to me that page-break-before doesn't work when printing in Landscape in IE7 (you can just look at the page preview, it does seem to work in portrait).

Any thoughts for a workaround?

I am trying to create a printable address book. The output is in the following format, with more tables for each entry:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Header Test</title>
		<link rel="stylesheet" type="text/css" href="documents/directory/style.css" />
	</head>
	<body>
	<h1>Stanley Road Baptist Church</h1>
	<h2>Address Book 2005</h2>
	<div class="pagebreak"></div>
	<table>
	<tr>
		<th colspan="2">
			Joan Facer
		</th>
	</tr>
	<tr>
		<td>
			Abbeystead<br />New Road<br />Lancaster<br />Lancashire
		</td>
		<td>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<hr />
		</td>
	</tr>
	</table>
	<table>
	<tr>
		<th colspan="2">
			Matt Fletcher
		</th>
	</tr>
	<tr>
		<td>
			6 Baycliffe Crescent<br />Morecambe<br />Lancashire<br />LA4 4EQ
		</td>
		<td>
			01524 426559<br />
			matt@1stmorecambe.net<br />
			07792 148897
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<hr />
		</td>
	</tr>
	</table>
	</body>
</html>

I am trying to make it so that it never breaks the page in the middle of an entry, but it will not play ball.

I am using the following CSS declaration to get the effect:

Code:

table {
	page-break-inside:avoid;
}

But it isn't working at all. Any suggestions?

I am trying to allow a right aligned image break out of my footer. So far it's just breaking out, but under rather than over. I.e:


Code:

        #footer {
                clear:both;
                width:100%;
                /* green bg footer image */    
                background-image: url(../img/footer_bg.gif);
                background-repeat: repeat-x; 
        }

Code:

<img style='float: right' src='src/to/pizza-pic.png' />

What I'm trying to achieve is to have the green footer at the bottom of the page and the pizza to appear in at the bottom also, but peeping over the green footer.

Do you know how I can achieve this?

Thanks in advance for any help

I have an internal document that depends on page-break-after to separate the pages when it is printed.

The attribute page-break-after:always had been working just fine. Now, I've noticed it is getting ignored on some users machines that have updated to IE8. I've never seen this problem in IE7 or Firefox, and I've also seen it work at times on IE8, though rarely.

For the most part, users on IE8 are getting a document that treats it as only one page and will only print that first of 14 pages.

Does anyone know about problems with this attribute in IE8 and what might need to be done to fix it.

I'm working on a new design and looking for some general advise. I've designed/coded a couple of sites, but I'm a volunteer and truly learning as I go. My question is this:
What is the "best" way to slice or break up a design in order to write efficient code? I know my way around CSS (somewhat) so I can conceive of all kinds of ways to do it, but I'm wondering if there's a standard. Case in point... here's my design:

http: // www . deepwaterchurch . com / mockup . jpg

Would a person make a DIV for the black header bar at the top,
another DIV for the logo beside a DIV for the slider,
2 rows of DIVs, side by side for the content blocks, etc?

Even so, it would seem to make sense (for the content blocks) to have 1 DIV containing the whole background image for that row (including the actual blocks) then 3 DIVs that are positioned within it to hold the actual text. Is there any standard practice?

If it matters, this will be a joomla-driven site. I can take whatever standards I learn here and apply then to secondary templates.

P.S. I've laid this out with the "960 Grid System" in mind, but I've never actually used it to code.

Thanks in advance for any guidance.

is there a way to check if a page-break is going to happen?

ex: if i print a long document that takes up 2 pages... i want to knwo where a page break will occur...

Below is my CSS file for list.
Code:

li {
   list-style-position: outside;
}
ul {   
   list-style-position: outside;
   list-style-type: disc;
   margin-left: 15;
}
ul ul {
   list-style-position: outside;
   list-style-type: circle;
   margin-left: 25px;

}
ol {
   list-style-position: outside;
   list-style-type: upper-alpha;

}
ol ol {
   list-style-position: outside;
   list-style-type: decimal;
   margin-left: 25px;

}

ol ol ol {
   list-style-position: outside;
   list-style-type: upper-alpha;
   margin-left: 35px;

}

Now, here's the problem. When I do this:

Code:

<b>Section Title</b>
<ul><li>List 1</li>
   <li>List 2</li>
   <li>List 3</li>
</ul>

The result showed up like this:

Section Title

*List 1
*List 2
*List 3


Is there a way to not having the line break after the "Section Title"? I want it to show up like this:

Section Title
*List 1
*List 2
*List 3


How to I take out the extra line break?

Any help is grateful!

ljCharlie

I have all pages that follow a CSS Rule. These are Dev Boxes that I created for my site.

One of the text on one of the pages is 1700 pixels height the others are only 700. When I created a rule for all pages but when I added the text on the one with 1700 pixels it stretched out all the boxes on all other pages as well. I want to break that one from the others so that it does not format all my pages like that one. How do I do it. I do I keep the CSS code style but on that one in particular change the rule to only allow that one to be 1700 pixels long.

Basically I don't want to have to recode the CSS page but I want that particular code to be just for that one page and keep the others with the 700 pixels height.

Please give me a simple explanation on how to break the rule on that page so that I can manually adjust it for that one page.

thanks

Hi im having trouble with a padding problem. I have a paragraph with a background color, and I need the paragraph to be on two seperate lines so I add the <br> tag and when i do this happens. http://www.sloweducation.com/la.htm

You see, it only does the padding-left on the top line.. is there a way I can make it pad the bottom line also? I dont know what to do at all.
Thanks.

I have a CSS, drop-down navigation menu for my company's site, at the top of every page: http://www.mediamogulsweb.com/.

It works fine in Firefox and IE6.

At first it seems to work in IE7. But if you mouse over the pop-out menus a few times, you'll notice that every so often the menu breaks (in IE7).

My guess is that it has to do with the display property set for the embedded unordered lists in the menu. But I have "display" set to "none", so it seems like I shouldn;t be having this problem.

Can anyone help? thanks...