Re: UL LI Lists not formatting according to my css

749 views
Skip to first unread message

BrianS

unread,
Jan 10, 2013, 5:18:53 PM1/10/13
to dom...@googlegroups.com
If I were to guess I'd say the use of floats is the issue. We're still developing support for floated elements. You might try using inline block elements instead, which will allow you to achieve basically the same look. I see a lot of JS as well, which is fine so long as it's used for interactivity and not content,layout, or styling.


On Wednesday, November 7, 2012 4:58:36 PM UTC-5, fredirc wrote:
I have it set up so that when anyone clicks 'Print as PDF' on my page, it takes the existing page html, re-formats all css and image src and href lines into complete urls, and then tries to render it as a pdf. The problem is, my menu, which is a list, simply smooches together.

Here is the page I am working on:


and here is the exact code I am passing to $dompdf->load_html()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
<title>Index</title>
<meta name="content-type" http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Index - Home Page">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="copyright" content="">
<meta name="revised" content="2012-11-07 16:41:10">
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
<script type="text/javascript" language="javascript" src="http://impactbykinetic.com/js/global.js"></script>
<script type="text/javascript" language="javascript" src="http://impactbykinetic.com/js/ajax_requests.js"></script>
<script type="text/javascript" src="http://impactbykinetic.com/js/browserdetect.js"></script>
<script type="text/javascript" src="http://impactbykinetic.com/js/collapse.js"></script>
<script type="text/javascript" src="http://impactbykinetic.com/js/showhint.js"></script>
<script type="text/javascript" src="http://impactbykinetic.com/js/AC_RunActiveContent.js"></script>
<script type="text/javascript" language="javascript" src="http://impactbykinetic.com/js/DateInput.js"></script><style>
td.calendarDateInput {letter-spacing:normal;line-height:normal;font-family:Tahoma,Sans-Serif;font-size:11px;}
select.calendarDateInput {letter-spacing:.06em;font-family:Verdana,Sans-Serif;font-size:11px;}
input.calendarDateInput {letter-spacing:.06em;font-family:Verdana,Sans-Serif;font-size:11px;}
</style>

<script type="text/javascript" src="http://impactbykinetic.com/js/datetimepicker_css.js"></script>

<link type="text/css" rel="stylesheet" href="http://impactbykinetic.com/css/global.css">
<link type="text/css" rel="stylesheet" href="http://impactbykinetic.com/css/local.css">
<link type="text/css" rel="stylesheet" href="http://impactbykinetic.com/css.php?p=137">
<link type="text/css" rel="stylesheet" href="http://impactbykinetic.com/css/navigation.css">
<link type="text/css" rel="stylesheet" href="http://impactbykinetic.com/css/showhint.css">
<link rel="stylesheet" type="text/css" href="http://impactbykinetic.com/css/tab.css">
<script type="text/javascript" src="http://impactbykinetic.com/js/tab.js"></script>
<script type="text/javascript"> var GB_ROOT_DIR = "http://impactbykinetic.com/greybox/"; </script>
<script type="text/javascript" src="http://impactbykinetic.com/greybox/AJS.js"></script>
<script type="text/javascript" src="http://impactbykinetic.com/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="http://impactbykinetic.com/greybox/gb_scripts.js"></script>
<link href="http://impactbykinetic.com/greybox/gb_styles.css" rel="stylesheet" type="text/css">

<link href="http://fonts.googleapis.com/css?family=Oswald:400,300" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet" type="text/css">
<script type="text/javascript" language="javascript" src="http://impactbykinetic.com/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="http://impactbykinetic.com/js/jquery.carouFredSel-6.1.0-packed.js"></script>  	
<script type="text/javascript" language="javascript" src="http://impactbykinetic.com/js/jquery.touchSwipe.min.js"></script>  		
<script type="text/javascript" src="http://impactbykinetic.com/js/carouFredSelSettings.js"></script>
<link type="text/css" rel="stylesheet" href="http://impactbykinetic.com/css/item.css">
<link type="text/css" rel="stylesheet" href="http://impactbykinetic.com/css/productsHorizontal.css">
<link type="text/css" rel="stylesheet" href="http://impactbykinetic.com/css/productsVertical.css">

<script type="text/javascript" src="http://impactbykinetic.com/js/ddaccordion.js"></script>
<script type="text/javascript">
	ddaccordion.init({
		headerclass: "submenuheader", //Shared CSS class name of headers group
		contentclass: "submenu", //Shared CSS class name of contents group
		revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
		collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
		defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
		onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
		animatedefault: false, //Should contents open by default be animated into view?
		persiststate: true, //persist state of opened contents within browser session?
		toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
		togglehtml: ["suffix", "<img src='http://impactbykinetic.com/css/img/plus.gif' class='statusicon' />", "<img src='http://impactbykinetic.com/css/img/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
		animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
		oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
			//do nothing
		},
		onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
			//do nothing
		}
	})
  
</script><style type="text/css">
.submenu{display: none}
</style>

<link type="text/css" rel="stylesheet" href="http://impactbykinetic.com/css/tables.css">
<link type="text/css" rel="stylesheet" href="http://impactbykinetic.com/css/accordian_menu.css">
<link type="text/css" rel="stylesheet" href="http://impactbykinetic.com/css/showhint.css">
<style type="text/css">@import "http://impactbykinetic.com/css/menu.css";</style>

<script type="text/javascript" src="http://impactbykinetic.com/js/dynMenu.js"></script>
<style>body {
font-family:oswald, ariel, sans-serif;
}

#content {
width:960px;
}

.header {
background-color:#4A4540;
padding-left:10px;
}

.topnav {
background-color:#4A4540;
height:50px;
}

.navContainer {
   position: relative;
}

ul.nav li a:hover, ul.nav li a:hover {
   color:#ffffff;
}

.subNav a:hover {
   text-decoration:underline;
   }
   
.nav {
   border:0px;
   margin:0px;
   padding:0px;
   font-size:14px;
   background:#4A4540;
   padding-right:10px;
   position: relative;
}
 
.nav ul {
   list-style:none;
   margin:0;
   padding:0;
 }
 
.nav li {
  float:left;
  padding:0px;
}

.nav > li a {
   background: #4A4540;
}

.nav li a {
font-family: 'Oswald', sans-serif;
color: 
white;
display: block;
line-height: 21px;
margin: 0px 0 0 3px;
padding: 14px 20px;
text-align: center;
text-decoration: none;
background-image: url('http://impactbykinetic.com/userfiles/image/navbg.png');
font-size: 18pt;
}
.nav li a:hover {
   background-image: url('http://impactbykinetic.com/userfiles/image/navbg.png');
   background-position: 0px 0px;
}
.nav li ul{
   background:#f0f0f0;
   display:none;
   height:auto;
   padding:0px;
   margin:0px;
   position:absolute;
}

.nav li:hover ul{
   display:block;
}

 .nav li li {
  display:block;
  float:none;
  white-space:nowrap;
  
}

.nav li:hover li a {
  background:none;
}

.nav li ul a {
  display:block;
  height:20px;
  font-size:12px;
  margin:0px;
  padding:5px 10px 10px;
  text-align:left;
}

.nav p{
  clear:left;
}

.nav li a:visited {
   color:#FFF;
}

.subNav li {
   background-color:#333;
}

.subNav {
   text-align:left;
   width: 150px;
   position: relative;
}

.nav .subNav li a, .nav .subNav li a:visited {
   color:#EEAB19;
   font-family: 'oswald', sans serif;
   font-size: 14pt;
   font-weight: 400;
}
.nav .subNav li a:hover {
   color:#fff;
   text-decoration: none;
   background-color: #EEAB19;
}

.content {
}

.footer {
background-color:#333;
color:white;
padding:15px;
font-size:12px;
text-align:center;
}


   .list_carouselF {
    margin-left: auto;
margin-right: auto;
width: auto;
   }
   .list_carouselF ul {
    text-align: center;
    list-style: none;
    display: block;
padding:0;
   }
   .list_carouselF li {
    text-align: center;
    padding: 20;
margin-left:auto;
 margin-right:auto;
    display: block;
    float: left;
   }
.Frednext {
 background: url(js/next.png) no-repeat 0 -140px;
 width: 35px;
 height: 140px;
 display: block;
 cursor:pointer; 
}
.Frednext:hover {
background-position: 0 0; 
}
.Fredprev {
 background: url(js/prev.png) no-repeat 0 -140px;
 width: 35px;
 height: 140px;
 display: block; 
 cursor:pointer;
}
.Fredprev:hover {

background-position: 0 0; 
}

.Fredpager {
    text-align: center;
}
.Fredpager a {
    background: url(js/pagination.png) 0 0 no-repeat transparent;
    width: 12px;
    height: 12px;
    margin: 0 5px 0 0;
    display: inline-block;
}
.Fredpager a.selected {
    background-position: 0 -12px;
    cursor: default;
}
.Fredpager a span {
  display: none;
}


   .NavSliderCSS {
    margin-left: auto;
margin-right: auto;
width: 760px;
height:140;
   }
   .NavSliderCSS ul {
    text-align: center;
    list-style: none;
    display: block;
padding:0;
   }
   .NavSliderCSS li {
    text-align: center;
    padding: 0;
 margin-left:auto;
 margin-right:auto;
    display: block;
    float: left;
   }
.NavSlidernext {
 background: url(js/next.png) no-repeat 0 -140px;
 width: 35px;
 height: 140px;
 display: block;
 cursor:pointer; 
}
.NavSlidernext:hover {
background-position: 0 0; 
}
.NavSliderprev {
 background: url(js/prev.png) no-repeat 0 -140px;
 width: 35px;
 height: 140px;
 display: block; 
 cursor:pointer;
}
.NavSliderprev:hover {

background-position: 0 0; 
}</style>
</head>

<body topmargin="0" class=" hasGoogleVoiceExt">

<!--[if IE]>
<style type="text/css">
 	#menu a, #menu a:link, #menu a:visited {
	padding: 10px 14px 8px;
	}
</style>
<![endif]-->
<div class="adminFloatingMenu noPrint">
	<table align="center" border="0" width="100%" cellpadding="0" cellspacing="0">
			<tbody><tr><td class="menuBG" align="center">
				<table align="left" border="0" width="100%" cellpadding="0" cellspacing="0">
					<tbody><tr>
						<td width="170" class="iconBG">
							<img src="http://impactbykinetic.com//images/admin/clear.gif" width="170" height="1">
							<div align="left" class="menucontainer">
								<ul id="menu" class="menu">
																	<li><a href="admin_home.php"><img title="Admin Home" src="http://impactbykinetic.com//images/admin/sitehome.png"></a></li>
																	<li><a href="admin_pages.php"><img title="Site Content" src="http://impactbykinetic.com//images/admin/sitecontent.png"></a></li>
																	<li><a href="admin_user_search.php"><img title="Users" src="http://impactbykinetic.com//images/admin/siteusers.png"></a></li>
																</ul>
							</div>
						</td>
						<td width="100%">
							<img src="http://impactbykinetic.com//images/admin/clear.gif" width="400" height="1">
							<div align="right" id="navBtns">
							<a class="navBtn" href="logout.php">Logout</a>
															<a class="navBtn" href="admin_page_manage.php?id=137">Edit This Page</a>&nbsp;&nbsp;
																																																			</div>
							<script type="text/javascript">
								initMenu();
							</script>
							<div style="clear:both;"></div>
						</td>
					</tr>
				</tbody></table>
			</td>
			</tr>
	</tbody></table>
</div>
<table align="center" cellspacing="0" id="content" width="1024">
	<tbody>
		<tr>
			<td class="header" style="text-align: left;">
				<img alt="" height="100" src="http://impactbykinetic.com//userfiles/image/impact%20files/images/impactheader.jpg" width="297"></td>
		</tr>
		<tr>
			<td class="topnav">
				<div class="nav" style="float:right;">
<ul>
<li class="no"><img width="9" vspace="0" height="18" alt="" src="http://impactbykinetic.com//images/hrr_nav_leftend.gif"></li>

	<li onmouseout="tempTdObj = this; tempTimeoutObj = setTimeout('hideSubNav(tempTdObj)',100)" onmouseover="showSubNav(this); if(this != tempTdObj &amp;&amp; tempTdObj) { hideSubNav(tempTdObj); }; clearTimeout(tempTimeoutObj);"><a href="index.php">HOME</a>
	
	</li>
        <li><img src="http://impactbykinetic.com//images/hrr_nav_spacer.gif"></li>

	<li onmouseout="tempTdObj = this; tempTimeoutObj = setTimeout('hideSubNav(tempTdObj)',100)" onmouseover="showSubNav(this); if(this != tempTdObj &amp;&amp; tempTdObj) { hideSubNav(tempTdObj); }; clearTimeout(tempTimeoutObj);"><a href="about.php">ABOUT</a>
	
	</li>
        <li><img src="http://impactbykinetic.com//images/hrr_nav_spacer.gif"></li>

	<li onmouseout="tempTdObj = this; tempTimeoutObj = setTimeout('hideSubNav(tempTdObj)',100)" onmouseover="showSubNav(this); if(this != tempTdObj &amp;&amp; tempTdObj) { hideSubNav(tempTdObj); }; clearTimeout(tempTimeoutObj);"><a href="contact2.php">CONTACT</a>
	
	</li>
        <li><img src="http://impactbykinetic.com//images/hrr_nav_spacer.gif"></li>

</ul>
</div></td>
		</tr>
		<tr>
			<td class="content">
				<p>
	Index - Home Page hello</p>
<script type="text/javascript">

</script>
<form action="#" method="post">
	<input id="html" name="html" type="hidden" value=""> <input name="pdfMe" onclick="$.noConflict();this.style.display = 'none'; document.getElementById('html').value = document.documentElement.innerHTML;this.form.submit();" type="button" value="Print As PDF" style="display: none; ">&nbsp;</form>
<p>
	&nbsp;</p>
</td>
		</tr>
		<tr>
			<td class="footer">
				FOOTER</td>
		</tr>
	</tbody>
</table>
	<div class="copyright"><p>Copyright © 2012 </p></div>
	<div class="designer"><p><a href="http://kineticmediainc.net">Website Powered by Force CMS</a></p></div>
	
<div id="hintbox"></div></body></html>
Reply all
Reply to author
Forward
0 new messages