Re: [css-d] Unreset Styles
Have you thought of doing it the other way? 1. Put new code in div class=newcss (or maybe body class=newcss) 2. Then, prefix all reset styles with div.newcss This will give you new code bloat too, but then all you to do is remove the div.newcss once the legacy code is all updated Parag On Wed, Nov 4, 2009 at 11:24 AM, Samuel Mikel Bowles sam...@atomicobject.com wrote: Hello, I am working on a largeish web application that has a lot of legacy CSS and HTML. I am currently working on a plan to refactor all of the HTML and CSS. The code is currently bloated, poorly written, and in desperate need of an update. On all new sections of that application that I create I want to use more modern, semantic code but in order to do so I need a method that allows me to progressively improve the code throughout the site. Here's what I am thinking: The site, as is the norm, has a common header and footer. It has a few configurations (two column, one column, etc) in a few places. I would like to start at the root: update the main elements that span the whole site: header, footer, basic structural elements like the columns, etc. The idea is that by updating these elements first I ensure that any new sections of the application can use pure code. The idea of starting with a reset style is a bit of a nuclear option though. It would most likely ruin all the rest of the styles in the site. So my idea is to create a bomb-shelter for legacy code. For now I would wrap sections that have yet to be updated in div class=legacy and use this to reverse the effect of the reset style. This would give me a reprieve until I can update each of these sections. I know that this would temporarily bloat my css. I can live with a little temporary bloat on the road to css zen. Here's my question: Does anyone know of a set of unreset styles? Something that will give me a comprehensive set of defaults that will get as close as possible to a cross-browser norm? Thanks, Samuel Mikel Bowles Design Director, Atomic Object 616.776.6020 | http://atomicobject.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trying to control floats on page
Hi Reg,
in this style:
#main {
margin-left:220px;
margin-right:10px;
overflow:auto;
}
you have a margin-left:220px;
change it to margin-left:10px;
like so:
#main {
margin-left:10px;
margin-right:10px;
overflow:auto;
}
And your problem should be fixed.
Thank You,
Parag Jagdale
Un-identified LLC
www.un-identified.com
On Thu, Aug 28, 2008 at 3:45 PM, Reg Reading [EMAIL PROTECTED]wrote:
I'm having trouble getting elements on my page to display correctly.
http://www.ukcrugby.co.uk/test/index.html
After trying to work out the solution myself I added overflow:auto to the
main ID, this has now moved the images to their correct position on the
page, but created a large empty column in the middle of the page
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Suckerfish dropdowns not working in IE6 or 7
Hi, I have some suckerfish dropdowns and I cant figure out why they refuse to work. If you mouseover them - the drowdowns show up, if you mouseout, the dropdowns dont disappear. Here is the code: http://careercam.net/About-CareerCam/ No idea what the problem is and been pulling my hair out about it. -- Thank You, Parag Jagdale Un-identified LLC www.un-identified.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Suckerfish dropdowns not working in IE6 or 7
ah... i knew it was something small! Thanks! PHP was 'escaping' the first '\' so I didnt realize the second '\' wasnt showing up and two are required or something like that. Typo in your script - it doesn't remove the 'sfhover' class on mouse-out, but keeps on adding new ones for each mouse-over. Make the relevant line... this.className = this.className.replace(new RegExp( sfhover\\b), ); ...and it'll work as intended. -- Thank You, Parag Jagdale Un-identified LLC www.un-identified.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] dropdowns appearing behind content
Hi Rebecca,
Try adding a z-index:1000;
to: .topnav:hover div.dropdown
so your ending code should look like this:
.topnav:hover div.dropdown
{
left: -1px;
z-index:1000;
}
it worked for me in FF. Didnt test in IE. Try it.
I'm wondering why my css dropdown menus are appearing behind the white
content area at http://www.blackfootchallenge.org/3col.html. Anyone know?
Thank You,
Parag Jagdale
Un-identified LLC
www.un-identified.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Suckerfish + Sliding Doors IE problem with mouse out
Hello, I have a problem with sliding doors and IE6 and I believe IE7 also. It works perfectly on it's own, but if I plug it into a CMS it doesnt seem to work. The problem is that the sub menus dont disappear when I select a different tab or mouse out of the menu I do nothing at all that is different when I attempt to put this into the cms from my test site, so I am stumped. Maybe some fresh eyes will reveal a stupid mistake. Here's the failing example: http://universityinterview.com/About-CareerCam/ It is the same result for every page. -- Thank You, Parag Jagdale Un-identified LLC www.un-identified.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hand coders vs wsywig coders...I had no idea
I think you should use DW more as training wheels in the beginning to learn how the actual code works. I am now a 100% hand coder, but I started off with Dreamweaver and learned the html things I didnt know by using the split view and watching the code being written as I used the WYSIWYG. It is useful for a beginner and small business sites with few pages that can be managed by the DW template system but not for larger sites which require more planning and thinking. If there's a problem and you've handcoded the site successfully, you will be able to fix it. This goes for even smaller sites. Scott Thigpen wrote: Hi Guys, Yesterday I was up for a job to take on a big website and design it. They were real impressed with my work, everything was going well until I said I coded with the aid of Dreamweaver. Then you would have think I had punched the guy in the mouth. I mean there was not even well we'll think about it it was we only use hand coders. I'm not above doing hand coding, but I have no earthly idea where even to start without dreamweaver holding my hand. So do most of you guys hand code? Or do you use a wsywig editor to help? Thanks Scott __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Thank You, Parag Jagdale Un-identified LLC www.un-identified.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table extending past 100% of browser window width
Philippe,
I tried what you suggested:
I added float:left; to
div#mainContainer{
float:left;
position:relative;
text-align:left;
min-width:800px;
height:100%;
}
In FF, it seemed to work, but it didnt extend all the way to contain the
whole table.
For IE7, the content area jumped underneath the left menu area so it didnt
help at all.
I think the hardest part about this problem is that the browsers are doing
what they are supposed to and there is no way to change the table sizes, so
I think I am stuck with it.
The good news is that yesterday I was able to make the basic background
image repeat in the body section so that there is no abrupt change in
colors, so even if the table jumps outside the legal area of the browser,
the user will never notice but will see a scroll bar. The only thing that
now looks ugly are the footer and (of course) the scroll bars, which I can't
help. Since you can only make one background image repeat in the body
section and the footer always changes vertical position, I cant make the
footer a background image. So now the footer always ends pretty much where
it used to and doesnt look correct.
Parag
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table extending past 100% of browser window width
Does anyone have any ideas? I have scoured the internet for a solution and the only one I found close to helping me is this: http://blog.gilluminate.com/2005/10/12/large-tables-inside-of-css-two-column-layout-causes-problems Applying the solutions means adding more scroll bars. I would definitely like to avoid more scroll bars as having even two or three similar tables would make the page very confusing. You COULD add just one div for the whole page and scroll it, but I wouldn't want to try to find where that div would fit best for every page. Thanks, Parag __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Table extending past 100% of browser window width
hello, I am having problems with tables that are too wide for a browser window. The client has existing html code that they cannot change in the near future and so I have to work with whats already there, and whats there is very very ugly. Here is the example: http://www.un-identified.com/ipa/example.html The containing div doesnt wrap around the whole table in both FF2 and IE7. Been banging my head on this all day. Hopefully someone can help. Note: There are validation errors, but I dont think they are critical. They are there mainly because someone who didn't know much about html coded this whole application and I purposefully kept those errors in there, because i want to be able just apply this design right over what they already have and fix the code as I go. Thanks, Parag __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check ::Jehangir::
I dont think your css is linked right - the styles are not applied at all. Parag __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Divs misaligning in IE only
I believe you are missing a float:left; in #maincontent
so it should look like:
#maincontent {
float:left;
padding-left:12px;
border-left: 1px solid #FFCC66;
margin-left: 236px;
}
Parag
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with menu in IE7 works in FF and IE6
Has anybody gotten a chance to look at this problem? Thanks, Parag On 2/1/07, Parag Jagdale [EMAIL PROTECTED] wrote: Hello, I am having problems with a menu in IE7. I cant figure out the problem. Any help is appreciated. The web site is at: http://www.rgampadds.com You can find css files here: http://www.rgampadds.com/templates/wcf_template/styles/ structureStyle.css and menuStyle.css both involve the menu code. Thank You, Parag Jagdale www.un-identified.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with menu in IE7 works in FF and IE6
Ingo, Just removing the height on #menuVertical worked by itself! Thanks a lot! Parag Jagdale __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE7 problem
I have tested in FF and IE6, but I have a problem with the menu for
www.rgampadds.com in IE7, anyone have any suggestions?
Here is the code:
div id=menuContent
div id=menuContainer
div id=headerVerticalBottom
div id=menuVertical
div id=menuVerticalwrap
!-- Menu Begin --
!menuContent
!-- Menu End --
/div
div id=menuFoot /div
/div
div style=clear:both;/div
/div
div style=clear:both;/div
/div
div id=underMenu
br /br /
The address and phone number info goes here
/div
/div
The CSS:
(I thought it might be the commented backslash hack below to get
IE5-mac to work, so i took it out and tried it - but still no go)
#menuContent{
float:left;
width:160px;
clear:both;
display:block;
}
#menuContainer{
clear:both;
display:block;
}
#underMenu{
padding-left:30px;
clear:both;
}
div#menuContainer{
float:left;
width:160px;
background-image: url(../images/wcf_menuRepeat.jpg);
}
div#headerVerticalBottom{
position:relative;
float:right;
width: 160px;
background-image:url(../images/wcf_menuHead.jpg);
background-repeat:no-repeat;
padding-top:35px;
}
div#menuVertical{
position:relative;
height:24px;
}
#menuVerticalwrap {
float:right;
padding-right:12px;
width:120px;
font-size:12px;
line-height:normal;
}
#menuVerticalwrap ul {
margin:0;
padding:0;
list-style:none;
}
#menuVerticalwrap li {
float:right;
margin:0;
padding:0;
width:120px;
text-align:right;
background-image: url(../images/wcf_menuButton.gif);
background-repeat: repeat-x;
background-position: left top;
}
#menuVerticalwrap a {
display:block;
font-size: 11px;
font-weight: bold;
color: #FF;
text-decoration:none;
line-height:14px;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
#menuVerticalwrap a:hover{
float:right;
display:block;
font-size: 11px;
font-weight: bold;
color: #00;
text-decoration:none;
/* padding-right:8px;*/
width:120px;
text-align:right;
/*background-color:#006699;*/
}
#menuVerticalwrap li {
float:left;
background-position: right top;
height:24px;
width:115px;
}
#menuVerticalwrap li {
margin:0;
padding:0;
}
#menuVerticalwrap a {
display:block;
background-position: left top;
}
#menuVerticalwrap a {
padding-bottom:2px;
padding-top:6px;
}
#menuVerticalwrap #current {
line-height:14px;
background-image: url(../images/wcf_menuButton.gif);
background-repeat: repeat-x;
background-position: left top;
}
#menuVerticalwrap #current a {
color: #00;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#menuVerticalwrap a {float:none;}
/* End IE5-Mac hack */
/**/
#menuFoot{
float:right;
width:160px;
height:38px;
background-image: url(../images/wcf_menuFoot.jpg);
background-repeat: no-repeat;
background-position: left top;
}
Thanks,
Parag
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
[css-d] What is a simple alternative to JS+CSS rounded corners
So the company I am working for suggests the use of one of the
Javascript+CSS rounded corners solutions. But I myself do not believe
in using Javascript for pure presentation, and I believe that
sacrificing the bandwidth to load all this JS is not worth the
benefit.
On the other hand, the solution I currently have is also a little
complex and heavy. It uses 3 images and 3 DIV layers. The header and
footer images in total probably take more bandwidth than the JS in the
other solution. The benefit I see in this solution is that there is no
3rd party (no JS to worry about). There are only DIV layers and CSS
classes that are already defined, so no JS is involved in
presentation.
Another benefit is that I can give the boxes any type of shadowing and
patterns in Photoshop to make the style of the boxes match the rest of
the site.
What do you think?
div class=portalBox
div class=portalBox_headSearch Colleges/div
/div
div class=portalBox_foot/div
portalBox: is a vertically repeating image
portalBox_head: a fixed width and height rectangle which has a non
repeating image with the top left and right corners rounded
portalBox_foot: a fixed width and height rectangle which has a non
repeating image with the bottom left and right corners rounded
div.portalBox{
float:left;
width: 524px;
text-align:left;
background-image: url(../images/portals/portalBox_blue_re.jpg);
background-repeat: repeat-y;
}
div.portalBox_head{
width: 524px;
height: 25px;
float:left;
background-image: url(../images/portals/portalBox_blue_head.jpg);
background-repeat: no-repeat;
text-align:left;
font-size:14px;
font-weight: bold;
color: #333;
padding: 0.6em 1em;
margin:0;
}
div.portalBox_foot{
float:left;
width: 524px;
height: 12px;
background-image: url(../images/portals/portalBox_blue_foot.jpg);
background-repeat: no-repeat;
}
What I want to know is am i just being stubborn about not using an
easier solution(The JS), or am I right saying that the solution is too
complex and no JS should be involved?
If there is a better no JS solution, im all ears!
Thank You,
Parag Jagdale
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What is a simple alternative to JS+CSS rounded corners
Thank you for your replies.
Yes, i was talking about NiftyCorners with sytanx that i briefly saw
looked like this:
Rounded(div.box_3_1_T,top,transparent,#8BBDF7);
Rounded(div.box_3_1_T,bottom,transparent,#CFE2F8);
Rounded(div.box_3_2_T,top,transparent,#4799E6);
Rounded(div.box_3_2_T,bottom,transparent,#B6D7F7);
Rounded(div.box_3_3_T,top,transparent,#306799);
Rounded(div.box_3_3_T,bottom,transparent,#7EB2E1);
I want to avoid that.
The following is what I have implemented with my method:
http://test.un-identified.com/misc_images/roundedCorners.html
I want to come up with something like that, but i dont believe a JS
solution will give me such shadowed borders...point me in the right
direction if there is such a method which uses images!
See how I have freedom with images and shadows in phtosohop, and I am
limited only by the fact that the width must be fixed?
On 12/27/06, Stephan Wehner [EMAIL PROTECTED] wrote:
On 12/27/06, Parag Jagdale [EMAIL PROTECTED] wrote:
So the company I am working for suggests the use of one of the
Javascript+CSS rounded corners solutions. But I myself do not believe
in using Javascript for pure presentation, and I believe that
sacrificing the bandwidth to load all this JS is not worth the
benefit.
On the other hand, the solution I currently have is also a little
complex and heavy. It uses 3 images and 3 DIV layers. The header and
footer images in total probably take more bandwidth than the JS in the
other solution. The benefit I see in this solution is that there is no
3rd party (no JS to worry about). There are only DIV layers and CSS
classes that are already defined, so no JS is involved in
presentation.
Another benefit is that I can give the boxes any type of shadowing and
patterns in Photoshop to make the style of the boxes match the rest of
the site.
What do you think?
div class=portalBox
div class=portalBox_headSearch Colleges/div
/div
div class=portalBox_foot/div
portalBox: is a vertically repeating image
portalBox_head: a fixed width and height rectangle which has a non
repeating image with the top left and right corners rounded
portalBox_foot: a fixed width and height rectangle which has a non
repeating image with the bottom left and right corners rounded
div.portalBox{
float:left;
width: 524px;
text-align:left;
background-image: url(../images/portals/portalBox_blue_re.jpg);
background-repeat: repeat-y;
}
div.portalBox_head{
width: 524px;
height: 25px;
float:left;
background-image: url(../images/portals/portalBox_blue_head.jpg);
background-repeat: no-repeat;
text-align:left;
font-size:14px;
font-weight: bold;
color: #333;
padding: 0.6em 1em;
margin:0;
}
div.portalBox_foot{
float:left;
width: 524px;
height: 12px;
background-image: url(../images/portals/portalBox_blue_foot.jpg);
background-repeat: no-repeat;
}
What I want to know is am i just being stubborn about not using an
easier solution(The JS), or am I right saying that the solution is too
complex and no JS should be involved?
If there is a better no JS solution, im all ears!
Thank You,
Parag Jagdale
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
When I came across this problem I thought, just look at what the
javascript does, and use that directly: it manipulates the DOM and
inserts spans and divs, as far as I remember. These have classes which
produce the appearance of rounded corners.
I don't know how this would compare to what you have assembled.
In general, I don't think it is wise to let the page appear
differently when javascript is turned off.
If you are generating the page with PHP, or Rails, or Java, etc. a
helper method could do the rounding on the server side, instead of
the browser.
Stephan
--
Stephan Wehner
http://stephan.sugarmotor.org
http://stephansmap.org
http://www.trafficlife.com
http://www.buckmaster.ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ
