Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS formatting question!

Status
Not open for further replies.
rrhode

rrhode

Programmer
Apr 19, 2005
16
CA
Hi there!

I was wondering if you could help me out with something.

http: mambo-templates.ty2u.com

I am trying to get the tables to line up properly in Firefox and IE but I cant seem to get it to work.

The "Latest News" module needs to be beside the "Popular" module but above the Welcome content.

I have fiddled around with this for an entire day and I havent figured it out. I must be missing something small somewhere.

Thanks!

Ryan
 
Sort by date Sort by votes
Oh, I forgot to post the code. In case you need it... here it is.

The part in my css file is:
Code: 
#top {
	margin-top:12px !important;
	padding: 5px 5px 5px 5px;
	height: auto;
	width: 438px;
	background-color:#FFFFFF;	
}
#topMods {
  float: none !important;
  float: left;
	width: 442px;
	\width: 442px;
	w\idth: 442px;
	padding-left:2px;
}
#user1 {
	float:none !important;
	float:left;
	padding: 5px 0px 0px 5px;
	overflow: auto;
	height: 110px;
	width: 220px;
	background-color:#EAEAEA;	
	border: 1px dashed #D9D9D9;
}
#user2 {
	float:none !important;
	float:left;
	padding: 5px 0px 0px 5px;
	overflow: auto;
	height: 110px;
	width: 220px;
	background-color:#EAEAEA;	
	border: 1px dashed #D9D9D9;
}
/*.user1 {
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
	width:45%;
}
.user2 {
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
	width:45%;
}*/
#mainBody{
	margin-left: 160px;
	margin-right: 160px;
	padding: 10px;
	margin-top: 12px !important;
	margin-top: 0px;
}

The part in my output is:

Code: 
			<div id="topMods" class="topMods">
				<div id="user1" class="user1">
								<table cellpadding="0" cellspacing="0" class="moduletable">
							<tr>
					<th valign="top">

										Latest News					</th>
				</tr>
							<tr>
				<td>
				<ul class="latestnews">
	<li class="latestnews">
	<a href="index.php?option=com_content&amp;task=view&amp;id=2&amp;Itemid=9" class="latestnews">
	Newsflash 1	</a>

	</li>
		<li class="latestnews">
	<a href="index.php?option=com_content&amp;task=view&amp;id=3&amp;Itemid=9" class="latestnews">
	Newsflash 2	</a>
	</li>
		<li class="latestnews">
	<a href="index.php?option=com_content&amp;task=view&amp;id=4&amp;Itemid=9" class="latestnews">
	Newsflash 3	</a>

	</li>
		<li class="latestnews">
	<a href="index.php?option=com_content&amp;task=view&amp;id=6&amp;Itemid=2" class="latestnews">
	Example News Item 1	</a>
	</li>
		<li class="latestnews">
	<a href="index.php?option=com_content&amp;task=view&amp;id=7&amp;Itemid=2" class="latestnews">
	Example News Item 2	</a>

	</li>
	</ul>				</td>
			</tr>
			</table>
							</div>
				<div id="user2" class="user2">
								<table cellpadding="0" cellspacing="0" class="moduletable">
							<tr>

					<th valign="top">
										Popular					</th>
				</tr>
							<tr>
				<td>
				<ul class="mostread">
 	<li class="latestnews">
 	<a href="index.php?option=com_content&amp;task=view&amp;id=11&amp;Itemid=9" class="mostread">

 	Example FAQ Item 2 	</a>
 	</li>
 	 	<li class="latestnews">
 	<a href="index.php?option=com_content&amp;task=view&amp;id=10&amp;Itemid=9" class="mostread">
 	Example FAQ Item 1 	</a>
 	</li>
 	 	<li class="latestnews">
 	<a href="index.php?option=com_content&amp;task=view&amp;id=9&amp;Itemid=2" class="mostread">

 	Example News Item 4 	</a>
 	</li>
 	 	<li class="latestnews">
 	<a href="index.php?option=com_content&amp;task=view&amp;id=6&amp;Itemid=2" class="mostread">
 	Example News Item 1 	</a>
 	</li>
 	 	<li class="latestnews">
 	<a href="index.php?option=com_content&amp;task=view&amp;id=7&amp;Itemid=2" class="mostread">

 	Example News Item 2 	</a>
 	</li>
 	</ul>				</td>
			</tr>
			</table>
							</div>
			</div>
			<br />

			<div id="mainBody" class="mainBody"><table class="blog" cellpadding="0" cellspacing="0"><tr><td valign="top"><div>			<table class="contentpaneopen">
			<tr>
								<td class="contentheading" width="100%">
				Welcome to Mambo								</td>
							</tr>
			</table>
			
		<table class="contentpaneopen">
				<tr>

			<td width="70%" align="left" valign="top" colspan="2">
			<span class="small">
			 Written by Web Master			</span>
			&nbsp;&nbsp;
			</td>
		</tr>
	.................. and it goes on.

Am I doing something wrong by floating them or I just dont know. It is so close but yet... no cigar!

So... triumpant shall I be!
 
Upvote 0 Downvote
This isnt the problem.

They are valid. The problem is the aligning of the divs. The float whatever. I dont really know. I still am having troubles :(

But there is one thing... sometimes my urls have & in them. When they do and I click those little validate buttons at the bottom of the site to validate it :) I notice it says to validate the html first and gives me an error.

Error
Target: Please, validate your XML document first!

Line 29

Column 23

The entity name must immediately follow the '&' in the entity reference.


When I validate the html it says this:


Warning:
Line 29, column 21: character "&" is the first character of a delimiter but occurred as data
Warning:
Line 29, column 22: character "&" is the first character of a delimiter but occurred as data
Warning:
Line 29, column 34: character "<" is the first character of a delimiter but occurred as data
Warning:
Line 35, column 15: character "<" is the first character of a delimiter but occurred as data


Well, it so turns out that

Code: 
/*line 29*/ if (windWidth > 775 && windWidth < 999){		/*if available width is between the set sizes*/
	newSize.style.width = windWidth;				/*set the outer div width to the available width*/
	}
	if (windWidth > 999){							/*if available width is more than 1024*/
	newSize.style.width = 999;						/*sets the size of the outer div taking scroll bar into account*/
	}
/*line 35*/	if (windWidth < 775){							/*if available width is less than 800*/
	newSize.style.width = 775;						/*sets the size of outer div taking scroll bar into account*/
	}

That is javascript and doesnt work properly for some reason. Maybe not allowed in xhtml? I am not certain as I dont know xhtml well at all.

But I do know that doesnt seem to be my main concern with the tables not lining up. I had them nearly lined up in IE at one point but have since moved them around. I feel there should be a line or two I am missing somewhere in the CSS but I cannot figure it out for the life of me.

I appreciate the help! Thank you so much!

Ryan
 
Upvote 0 Downvote
[ul][li]& symbols should be written as [tt]&amp;[/tt].[/li]
[li]javascript should either be in a seperate file, or encoded as follows:
Code: 
<script type="text/javascript">
  [COLOR=green]// [COLOR=blue]<![CDATA[[/color][/color]
   ...
  [COLOR=green]// [COLOR=blue]]]>[/color][/color]
</script>
The // stops the browser's javascript engine trying to parse the <![CDATA[ line; the <![CDATA[ and ]]> code marks the section in between as non-xml content. (Which is correct - JavaScript is not xml content).

But in general, it's preferable to keep JavaScript in a seperate file. Makes it easier to maintain as well...
[/li][/ul]

<marc>
 
Upvote 0 Downvote
Remove the <xml> declaration from the top. That pushes IE into quirks mode and makes your page look ok. If it would be in standards mode it would look the same in IE and FF and would be easier to fix. Just remember your box model. The space reserved for the box is:

margin + border + padding + width.

So, if you have a container with a width of 100px you cannot put two containers that have 50px width and 2px left padding in. They need to be 48px wide each.
 
Upvote 0 Downvote
Cant do quirks mode or the cdata thing. Can't put the javascript in a seperate file either. No clue which div has excess padding or whatever.

I cant do quirks because when I do take that xml declaration out it doesnt make the window bigger in IE because the CSS that does that only works for firefox.

I also cannot do the cdata thing unfortunately because then the resize javascript just simply does not work. I have no clue why really. I have never even heard of cdata before. If I put the script in a seperate file it doesnt work for some reason.

I do appreciate the help but it doesnt work any of the suggested ways unfortunately. I have no clue why though. I really wish it would because I need to get this done. I hope someone knows something that is missing because I would be so greatful. I would link to your site or give you a bit of cash or whatever you need I can do it. I just can't seem to do this right now. I am sure I will figure it out eventually..

Thank you !!!!!!!!!!!!!!!!!

Ryan
 
Upvote 0 Downvote
Well, I got the div sizes and things sorted out it would seem... it now displays the grey area boxes in the center on the same line in FF. Now I just have to figure out why that welcome text doesnt go down below.

Any ideas?

Ryan
 
Upvote 0 Downvote
You really should follow Marc's and Vragabond's advice and before attempting to debug the page,
1) Give it a valid doctype so it renders according to standards and not in quirks mode, and
2) If the doctype is XHTML, wrap the javascript in CDATA tags so it can be ignored by the validator.
3) Then validate, validate, validate.

Otherwise you're playing squirrel-bop - you fix one thing so it works in one browser and it breaks something else in another browser.

It can be very frustrating to debug pages when you can't determine why a statement that should work isn't. My experience has been that it's usually bad HTML (or IE-specific HTML rendered in a non-IE browser) that causes the most headaches. Validating early and often can eliminate much pain.




Mike Krausnick
Dublin, California
 
Upvote 0 Downvote
I have actually followed their advice.

XML and CSS are valid!

I just dont know how to now get IE to shrink as it should.

You will notice in FF as you resize the window it will shrink and grow between 800 and 1024 but in IE if you start small and reload it will only grow and wont shrink again now.

I have been able to get everything to work fine in FF now but it does not look the same in IE.

Squirrel-bopper
 
Upvote 0 Downvote
I have no actually got things lined up properly. What I am lacking now is the ability for things to resize properly. It is a mixture of this and lining up actually.

The welcome content does not stay down under the grey boxes unless I make it a large enough size.

I can make it a set size 442 for example and it will stay under but then that kind of defeats the purpose of having the entire thing stay between certain demensions anyway and it doesnt stop resizing in IE then.

I took the javascript right out and was trying CSS lines like this.

Code: 
width:expression(document.body.clientWidth > 1024? "1024px": "auto" );
	width:expression(document.body.clientWidth < 800? "800px": "auto" );

But they dont seem to work at all. So I think I will have to put that javascript back in.

Well, if anyone can help me out here that would be wicked cool because I am still bopping squirrels apparently. They seem to be enjoying it a little more than I am.

Ryan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
785
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
622
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
664
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
210
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top