CSS - Form Testing. Please, Need Advice.

This is where I always run into trouble. I don't know if I'm taking from the right approach but this is what I usually do and I always end up getting frustrated and taking it out of those poor IE users and just removing IE fixes completely.

I usually tackle completely design a site using Firefox and then apply patches as I get around to it ( a round tuit ), but sometimes, a fix will cause other errors and it just ends up in a domino effect until my IE CSS file is bigger than my Firefox CSS and there are still problems. How should I go about this? Should I go to the ghetto with $100 and go around shooting IE users .... or better yet IE development decision makers....?

I found the solution to my IE browser issues. There seems to be a new guide out there with a lot of great comments about it. The last guide I followed had a bunch of people asking for help. Hope this works.

In case you guys didn't know about this, you can have multiple versions of IE, back to IE3, running simultaneously on your machine (for testing out your web work).

Here's the link:
http://tredosoft.com/Multiple_IE

I just have IE5 through IE7 installed as there's no way I'm developing for 4 and below. Heck, I pretty much just test in IE6 and up.

Hope this helps.

Hello to all,
I have a problem of compatibility when using Safari (V3).
I have a strange interface and i can't identify the problem. When I refresh my page,I don't have the same css !!!!
The same interface is testing wit hFirefox and IE and it's ok.
Can you help me please.
Thank you in advance for your time.

Hi Guys,

I've had a hunt around the forum but haven't yet found anything too specific, so here goes...

Basically, I have a design all done in photoshop and ready to be physically created in CSS, no problem there, I can do that.

However, I really need to be able to implement some content management into this site and am a little stuck on the best way to go.

I've been on google and looked at solutions, downloaded Joomla so far, but this looks like it could be very difficult to get my design into it, so to speak and I'm not so hot on PHP.

The templates in Joomla seem quite complex and look nothing even close in layout to my design!

Does anyone have any advice on a good CSS based CMS (ideally free!) that I can easily integrate my own design to?

If anyone has any experience or advice on doing this, it would be much appreciated. I don't need to be able to do anything massively complicated, just apply my own design, with some content pages, news etc.

Any advice/suggestions, very much appreciated!

Thanks

Jon

I want to start using em to specify widths and heights, specifically because of the fact that it correlates with the font size. However, the problem I'm having is that I have no idea what the conversion between % for width and em would be.

I'm not worried about height in this fashion, simply because vertical scrolling isn't ugly, but if I specify too high of an em for width, that makes a layout span the entire page for my browser, someone else might not have the same effect, and thus scroll horizontally.

Should I just stick to use em for height and % for width? I really want to use em though...need advice on this.

okay i want to make myself a website and to make it decent i seem to need to know HTML, PHP, CSS etc etc :s it all seems really hard i know quite a bit of macromedia flash and i know quite a bit of html but i am all new to CSS and PHP. CSS from what i can gather is what i need to know and i don't have a clue about it can somebody give me a link to an easy tutorial for CSS? or if anyone knows where i can start? most tutorials i just end up giving up on because i just can't be bothered reading any further thanks fir reading this i just need to know the basics so i can have a play around with and teach myself.

Daz

Hello,

Here's the site, it's being built on a CMS called Sitestaker.
http://www.mera.sitestacker.com

I can't for the life of me fix all the messed up positioning. here is my CSS. I used another CSS file from a previous site, so there are duplicates and who knows what else I am missing so I can easily lay this thing out. Where can get some CSS templates that I could use to start out a new site. the cms is using Cake PHP if that helps any. I am not a programmer and it is driving me nuts attempting to do the job of one. thanks for your help. I have managed with my other sites, but I can't fix this one. www.theinlan.com
Code:

body {
	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #666;
	background-color:#FF9933;
	margin: 10 10 10 10;
	
}

#header {
	background-color:#FFFFFF;
	margin-right: auto;
	margin-left: auto;
	width: 1000px;
	height: 133px;
	
	

	
}
#header_right{
		
	
}



#search {
	
	width: 150px;
	margin-left: 10px;
	float: right;
	
	
}

#header_container {
	background-color:#cc6600;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	
}

#header_wrapper {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	height: 133px;
	background-color: #cc6600;
	
	/*/#cc6600/*/
		
}


#menu_wrapper {
	width: 900px;
	/*/background:url(images/mera_slice_09.jpg) repeat-x;/*/
	
	margin-right: auto;
	margin-left: auto;
	
}

#menu {
	background-color:#333333;
	width: 900px;
	padding: 10px 0px 0px 0px;
	font-size: 14px;
	
	font-weight: bold;
	
	
}

#menu .item {
	
	float:left;
	width: 120px;
	margin-right: auto;
	margin-left: auto;
	height: 30px;
	padding-top: 13px;
	text-align:center;
	
	
}


#menu a {
	color: #666666;
	text-decoration:none;
	
}

#menu a:hover {
	color: #CCC;
	
}


#menu .main_menu {
	float:left;
}

#breadcrumbs {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 9px;
	color: #666;
	margin-left: auto;
	margin-right:  auto;
	width: 750px;
	
	
}


/*/#r1c1 {
	width: 100%;
	
	height: 38px;
}/*/

#r1c1 {
	background-color:#CC9966;
	
	/*/Dan's New Stuff/*/
	
	width: 180px;
	float:left;
	
	/*/ width: 800px;/*/
	/*/padding: 40px 0px 0px 20px;/*/
	font-size: 14px;
	margin:30px 10px 10px 10px;
	padding: 10px;
	/*/font-weight: bold;/*/
	
	
	
} 

#r1c1 .item {  /*/ controls positioning of menu items & text/*/
	
	width: 175px;
	height: 30px;
	
	text-align:middle;
	background:url(/data/sites/34/images/merabutton.png);
	background-repeat:no-repeat;
	padding:5px 0px 0px 0px; /*/controls positioning/*/
	
	
}

#r1c1 a { /*/ this is the menu font styling/*/
	color: #333333;
	text-decoration:none;
	padding:5px 0px 0px 10px;
	
}

#r1c1 a:hover {  /*/ this is the menu button hover color/*/
	color: #999999;
	
}


#r1c1 .main_menu {
	
}


#r1c2 {
	margin-left: auto;
	margin-right:  auto;
	width: 640px;
}

#r2c2 {
	padding: 15px 0px 15px 15px;
	margin-left: auto;
	margin-right:  auto;
	width: 700px;
	float: left;
}

#r3c2 {
	margin-left: auto;
	margin-right:  auto;
	width: 750px;
}

#r2 {
	width: 1000px;
	margin-left: auto;
	margin-right:  auto;
}

#r4 {
	width: 1000px;
	margin-left: auto;
	margin-right:  auto;
}

#r2c2 .title {
	
	font-size: 24px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	line-height: 40px;
	
}
#content_area {
	background-color: #e6ebba;
	width: 1000px;
	margin-left: auto;
	margin-right:  auto;
	margin-bottom: 0px;
	
	
}
#content_bg { /*/ white content area with dropshadow edges/*/
	width: 1275px;
	
	margin-left: auto;
	margin-right:  auto;
	background: url(images/me) repeat-y ;
	/*/height: 1000px;/*/
/*/padding-left: 40px;
	padding-right: 45px;
	}
	/*/

#mainpositions{    /*/ look at tables created in index to see how it was done
						tables ,once formatted work the best to hold together 
						two column layout accross browsers./*/
	width:900px;
	margin-left: auto;
	margin-right:  auto;
	
	}

#footer_wrapper {
	/*/
	background:url(images/mera_slice_02.jpg) repeat-y;
	width: 100%;
	margin-top: 0px;
	position: bottom;
	/*/
}

#footer {
	background:url(/data/sites/34/images/footer.png) repeat-x;
	/*/width: 100%;/*/
	margin-left:auto;
	margin-right:auto;
/*/	color: #FFF9933; 
	text-align:center;
	padding-top: 30px;/*/
	height:369px;
	
}

#r3c1 {
	
	padding: 10px 10px 10px 10px;	
	
}

#r2 {
	
	
}

.cells {
	padding: 10px 10px 10px 10px;	
	vertical-align: top;
	text-align: left;
}


#menu .style .menu .submenu_item {

	background: url(images/dropdown.png) repeat-x;

	height:27px;
	text-align: left;
	font-size: 12px;

	padding-left:10px;
	padding-right:14px;
	padding-top: 10px;
	width: 900px;
	cursor: pointer;


}

#menu .style .menu .submenu_item_children {

	
}

#menu .style .menu .submenu_item:hover{

	color: #ccc;

}

#menu .style .menu .submenu_item:hover > div > a{

	color: #CCC;

}

#menu .style .menu .submenu_item a {

	text-decoration:none;

	color:#6699FF;

}

.submenu_item, .submenu_separator {

	display:none;

	position:absolute;

}

HERE IS THE INDEX FILE

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{{PAGE_TITLE}}</title>
<base href="{{BASEHREF}}" />
<link href="{{CSS_HREF}}" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="{{JS_SRC}}" ></script>
<style type="text/css">
<!--
body {
    margin-left: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
}
-->
</style>
<meta name="verify-v1" content="mQhyWuqXn58ls4L3sIdz1oujvxtwMSi8YIWGW8HPAGg=" />
{{HEAD}}
</head>
<body>

<div id="header_wrapper">
<div id="header_container">

    <div id="header" tpl_position="header">{{HEADER}}</div>
    <div id="header_right" tpl_position="header_right">{{HEADER_RIGHT}}</div>
    <div id="search" tpl_position="search">{{SEARCH}}</div>
</div>
</div>
<div id="menu_wrapper">
    <div id="menu" tpl_position="menu">{{MENU}}</div>
</div>

<div id="content_area">

<table id="content_bg" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>


<div id="breadcrumbs" tpl_position="breadcrumbs">{{BREADCRUMBS}}</div>


<div id="r1c1" tpl_position="r1c1">{{R1C1}}</div>


<div id="r2c2" tpl_position="r2c2">{{R2C2}}</div>
 
<div id="r3c2" tpl_position="r3c2">{{R3C2}}</div>
  </td></tr>
</table>
</div>

<div id="footer_wrapper">
<div id="footer" tpl_position="footer">{{FOOTER}}</div>
</div>


</body>
</html> 

Hi,

I am quite familiar with css - have a few books on the subject but always struggle when trying to work with a design of my own.

I guess where I struggle is in what to do first ... how do I work ... my work flow. I always seem to get part of it right but then as I go further ... I find that my next step might undo my previous ... so I end up with a maze or positioning problems etc. I struggle with getting everything positioned properly ... not sure why.

I was hoping someone could start me off in the right direction ... you a what to do first series of steps ... or maybe a workflow from someone more exprienced in the design area of things - I'm more of a backend kinda guy.

Really anything would help ...

Thanks

Hi all, I have modified a wordpress theme for my website and its nearly perfect except for an issue where my photo is being cutoff and I have had a look but it appears to be beyond my skill level and is making me pull my hair out.

Would REALLY appreciate if anyone can solve this one for me!

hmmm I cannot post the url yet as i am new

dubdubdub.lightwork.co.nz/?p=1 is the url please replace dubdubdub with www thanks

that is the url and its the second image down, the larger image. It works fine in firefox and ie7, but in ie6 (which it needs to work in it is being cutoff as you can see.

Any help would REALLY be appreciated. happy to do something in photoshop or whatever in return

Mark

Hello,

I am working on a web site with a two column layout, "Content" on the left and "Sidebar" on the right.

Sidebar
1) Sidebar is divided into sections (div). Each section has header.

Content
Content can display the following data (each is a different page):

2) In HomePage.html a list of blog articles is displayed. Each blog article has a title.

3) In ShowArticle.html a specific article is displayed (Title, Body, Tags).

4) In Documents.html a list of documents is displayed but in this case the page
has a title and a subtitle. For example:

Documents
here you can find all the documents you need.

5) In Contact.html a title with subtitle is displayed just as in (4).
After the title and subtitle there is only paragraphs with the contacts.

So basically that's it ... I am trying to figure the correct way to use <h1>, <h2>, etc.

The text font, weight and color is always the same ... what changes is the size.

For example, if in HomePage the Post Header could be <h1> because there is no page title, in Documents there is a page title and a subtitle (should be this a paragraph? it's more like a description phrase then a section separator). So in Documents each Document could have <h3> ...

And if there is a Page Title (h1) then should side bar have <h2>? I suppose it is more correct to be h1.Sidebar.

And in ShowArticle I am displaying one article. Should I use the <h1> in the title? Then it would be the same tag then in Sidebar section ...

I have been looking in a few web sites and blogs and they differ ...

Anyway, I am just trying to make this right ...

Any help is welcome.

Thanks,
Miguel

I had posted in another thread about this but it's been awhile and I am not sure if that thread is still "alive" so to speak. Here is what I am after -

www.tmhdesign.com/buzza.jpg

Here are my attempts:

www.tmhdesign2.com

www.tmhdesign2.com/default2.asp

www.tmhdesign2.com/default3.asp

I have come close in IE but in Firefox it bombs. I can't fathom how that bottom background can be positioned so the text in the navigation and content divs can sit on top of it.

Would you all please peek at this layout, www.tmhdesign.com/buzza.jpg and give me some advice on the structure you'd use. I see a two column layout with a footer and header. I did not lay this out but rather it was given to me by a clients' graphic artist. I am curious to know if you think it will work. I am a bit challenged with the bottom swoosh that is in both the left hand column and the right main body. The designer has main body text going into what I would think would be the footer area?

http://www.beckin.com
http://www.bestdropshipper.net

I just recently updated my firefox to the most available version. This firefox version absolutely sux. I don't know why all these browsers have to keep causing trouble for designers.

You will notice that my css style for Beckin Designs no longer works.

Code:

<style type="text/css">
@font-face {
	font-family: English;
    font-weight: normal;
	src: url(fonts/English_.ttf);
}
</style>

If you view this site in other browsers or the firefox version previous to the latest release you will notice it displays fine. However, not in the new firefox.

Next, the best dropshipper menu doesn't display correctly either.

How can I go about fixing these issues? Do I need to do some time of if statement. Please let me know exactly how to address these issues.

Thanks!!

Hi,

Im interseted in creating V.3.0 of my site in a css valid layout using Div's and Xhtml compliant code. I am vaguely familiar with this practice, however would like some preliminary feedback and advice on how to go about doing it.

Here's a preliminary screenshot of my site in jpg. format, thanks.

http://uberserver.ath.cx/~rohan/PS1.0.jpg

Here's the main site (v.2.0) if you're interested.

http://www.ubertropolis.tk

Thank you!

Hi all, just begun on the path of learning CSS and a little advice needed. I am experimenting with an image and thought it would be easy to animate my banner pic with a flash animation, but its not.

Basically I have a transparent GIF image rather like a picture frame with irregular inside edges. I want the flash animation to show in the centre, ie so that the gif image overlays it and parts are hidden by the jagged edges of the gif.

I thought this would be simple to achieve with what I have picked up so far but not so!

Could someone let me know how to achieve this.

EDIT- sorry should have made it clearer, this is two images, one over the other.