close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Overlapping style sheets using: CSS Sculptor and CSS form builder

Thread began 7/26/2011 6:42 am by Nathan69474 | Last modified 7/26/2011 9:25 am by Nathan69474 | 1906 views | 6 replies |

Nathan69474

Overlapping style sheets using: CSS Sculptor and CSS form builder

Hi

I've got a css problem when using css form builder in a site sculptor page.

This is hard to explain, so I've attached 3 screen prints which hopefully will be self explanatory:
1 firefox web page view of css form. It is the same in explorer, but if I click the explorer compatiblity tool, the form shifts up the page and displays properly.
2 dreamweaver split code/design view.
3 a different page without css form builder on it (uses image resizer brilliantly).

Basically the form positions itself in the 'content' section but only starts where the LeftColumn content finishes.

if you look closely at the screen prints the css form only starts, at the 'closing point' of the LeftColumn1 div.

I have also tested, removing all content from my left column and yes the form done slide up the page ...

so I think <!-- I need a closing div tag, but don't know what it should be called--> see below where I think it needs to be placed.

Thnaks
Nathan


<div id="outerWrapper">
<div id="header"><img src="images/logo-image.jpg" alt="Logo" width="960" height="140" /></div>
<div id="topNavigation">
<?php require_once("CSSMenuWriter/cssmw_content/menu.php"); ?>
</div>
<div id="contentWrapper">
<div id="leftColumn1">
</div>

<!-- I need a closing div tag, but don't know what it should be called-->

<div id="content">
<!-- InstanceBeginEditable name="content" -->
<!-- intro -->
<div class="page_text_cent">
<h1>page header text</h1>
</div>
<!-- contact form -->
<div id="Form_Cool_ProgressWrapper">
<form class="Cool_MyForm" id="Form_Cool_MyForm" name="MyForm_Cool_R" method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>">
<!-- rest of form etc

Sign in to reply to this post

Ray BorduinWebAssist

I think the form css has a clear:both; somewhere that needs to be removed. If you post a url where I can view it I can find the exact line.

Sign in to reply to this post
Did this help? Tips are appreciated...

Nathan69474

_page8a.php ...

Sign in to reply to this post

Ray BorduinWebAssist

fd_cool_ratpack.css

line 114

remove the clear:both from the form.Cool_RatPack fieldset.Cool_RatPack style.

Sign in to reply to this post
Did this help? Tips are appreciated...

Nathan69474

Thanks for that Ray ... it fixed it.

Trying not to be too much of a pain, there also set of extra bullet points which stem from the content.css file

#outerWrapper #contentWrapper ul {
list-style-type:square; /*changed from list-style: circle;*/
margin: 0 0 0 20px; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}

If I code out the list style ... it clears site wide ...
/* list-style-type:square;changed from list-style: circle;*/

How do I turn this off in the form builder's css without sacrifing the bullet point on my side navigation lists ... see same link as before.

If I manually delete all the <ul> and <li> (opening & closing tags) from the form they do disappear striped down eg of what I mean...

FROM...
<ul class="Cool_RatPack">
<li>
<fieldset class="Cool_RatPack" id="Rat_Pack_Booking_Enquiry_Form">
<legend class="groupHeader">Rat Pack Booking Enquiry Form</legend>
<ul class="formList">
<li class="formItem"> <span class="fieldsetDescription"> Required * </span> </li>
<li class="formItem">

TO....
<!-- <ul class="Cool_RatPack">
<li> -->
<fieldset class="Cool_RatPack" id="Rat_Pack_Booking_Enquiry_Form">
<legend class="groupHeader">Rat Pack Booking Enquiry Form</legend>
<!-- <ul class="formList">
<li class="formItem"> -->
<span class="fieldsetDescription"> Required * </span>
<!-- </li>
<li class="formItem"> --> etc etc

Thanks
Nathan

Sign in to reply to this post

Jason ByrnesWebAssist

add the following style to the fd_cool_ratpack.css


form.Cool_RatPack li {
list-style-type: none;
}

Sign in to reply to this post

Nathan69474

... you lot are a bunch of (swear word) geniuses !!!

Thanks
nathan

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...