CSS - Customizing Blog Import With Css

Hi there! I'll cut right down to the chase: is my method of styling form input fields efficient? Is there a better way to do it? I tried directly styling the input, rather than putting it in a div, but it didn't work in IE (when too much text went into the field, the background would move, no matter what I did. ) Also, is my <label> styling okay?

HTML Code:
Original - HTML Code <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div>

  

<div class="formRow">
    <div class="textInput">
        <input class="textInput" id="name" type="text" />
        <label for="name">Name</label>
    </div>
</div>

CSS Code:
Original - CSS Code #content div.formRow:hover { background-color: #EEE; } #content input.textInput { font-size: 14px; color: #666; padding: 3px 5px; width: 190px; height: 20px; border: 0; background-color: transparent; } #content input.textInput:focus { color: #000; } #content div.textInput { margin-left: 50px; background: transparent url('images/textInput.png') no-repeat; } #content div.textInput label { font-size: 14pt; font-weight: bold; margin-left: 50px; vertical-align: top; }

  

  


 #content div.formRow:hover


     {


     background-color: #EEE;


     }


 #content input.textInput


     {


     font-size: 14px;


     color: #666;


     padding: 3px 5px;


     width: 190px;


     height: 20px;


     border: 0;


     background-color: transparent;


     }


 #content input.textInput:focus


     {


     color: #000;


     }


 #content div.textInput


     {


     margin-left: 50px;


     background: transparent url('images/textInput.png') no-repeat;


     }


 #content div.textInput label


     {


     font-size: 14pt;


     font-weight: bold;


     margin-left: 50px;


     vertical-align: top;


     } 

And lastly... my image:


Thanks a lot!

I've got a pain of a problem.

Firstly I've got my styles as
Code:

<!-- styles that need applying in all browser (including IE/NS 4.x)
<link ... />
<!-- styles that need applying in modern browsers (IE 5> etc.) -->
<style type="text/css" media="screen">
	@import "/screen.css";
</style>
<style type="text/css" media="print">
	@import "/print.css";
</style>

The problem is that IE 5 & 5.5 seem to ignore the media attribute on the style blocks so they include all the styles.

I read somewhere that using @media will solve this problem, so I did:

Code:

<!-- styles that need applying in all browser (including IE/NS 4.x)
<link ... />
<!-- styles that need applying in modern browsers (IE 5> etc.) -->
<style type="text/css">
	@media screen {
		@import "/screen.css";
	}
	@media print {
		@import "/print.css";
	}
</style>

This works fine in IE 5.x and IE 6, but now for some reason Firefox (1.0.7) is not including ANY of the imported sheets. However if I add normal rules within the @media ... {} sections then they are applied.

Can anybody verify this, and does anyone have a solution?

Thanks in advance,

-D

Hello all,

Is it ok to add the following on the same htm page???

The reason I think, and corrcet me if i am wrong, is that Netscape wants the IMPORT one as opposed to IE wanting the LINK one.

Code:

<link href="scripts/CoffsCoast.css" rel="stylesheet" type="text/css" />
<style type="text/css">@import url("scripts/CoffsCoast.css");</style>

I'm building a site that will have a style sheet that should be applied site wide (main.css) and then some pages will have styles that should only be applied to them (custom<X>.css).

Should I use multiple <link> tags to import each stylesheet or should I edit custom<X>.css and add @import "main.css"; to the beginning. Doing this would make the code look cleaner, but will the browser still cache the main.css file?

Am I being too persnickety about the look of my code and just use multiple <link>s?

I'm creating a bunch of stylesheets for our intranet, and rather than have our webmasters use a <link> tag for each individually, i thought I would use @import statements within one main stylesheet. Like this:

Code:

@import url("1.6/core.css");
@import url("1.6/mobile.css");

As you see above, there's a mobile stylesheet as well, which has something like this inside:

Code:

@media screen and (max-device-width: 480px){ 
..stylesheet code...
}

This all works fine, though I got to thinking it would be nice to somehow specify in the import statement this is a mobile stylesheet, so desktop browsers wouldn't bother downloading it.

Using a <link> tag I could do:
Code:

<link rel="stylesheet" type= "text/css" media="only screen and (max-device-width: 480px)" href="iphone.css"  />

Is there a way to do something similar with the @import line?

I'm having a bit of trouble getting my font to align itself in the middle of a DIV (as it has a background). In FireFox it looks fine, in the middle of the div. But in Netscape and IE it is at the very top of the div (in Netscape) and really high (in IE). Usually I would just add padding-top to the div to position the text in the center, although this then knocks out FireFox.

Not sure the best way to solve this?

Would I have to import a different CSS file for the browers? I guess this would be best so I can target the little issues with each. How would I do this and make the browers know which is which?

Thanks

i thought i was pretty well versed in css, but i have come across an annoying problem.

on my website, i have multiple external stylesheets; there is virtually 0 internal and inline styling. this is to make the code as clean and elegant as possible.

the primary stylesheet, full.css , references to two other external stylesheets ( background.css and spacing.css ). background.css ' only purpose is to enable the background scaling feature. spacing.css ' only purpose is to set the margins, padding, etc of the page(s).

i have an alternate stylesheet, bw.css , but it only references spacing.css , since the scaling background feature is not intended to part of how the page looks when styled with bw.css .

i have used (or attempted to use) the * universal selector in bw.css to style every element to use a different background, different font color, and different font than what was used in full.css .

the problem is, the * doesnt seem to work as intended, when combined with @import . only certain css properties seem to work, but i do not know which ones work and which ones dont.

i can rectify the problem by using !important , but id rather not, since its not as elegant as not using it.

my question is, how do i solve this problem without using !important ?

my site: prototism.co.cc

full.css
css Code:
Original - css Code @import url("background.css"); @import url("spacing.css"); * { cursor: default; font-family: "Verdana", sans-serif; } a { color: #ddd; cursor: pointer; text-decoration: none; } a:hover { background-image: url("../img/link-bg.png"); color: white; } #links, #header { font-size: 34pt; letter-spacing: -3px; } #links, #footer { text-transform: lowercase; } #header { color: white; } #footer { font-size: 12pt; } #footer span { color: #ddd; }

  

 @import url("background.css");


 @import url("spacing.css");


  


 * {


 cursor: default;


 font-family: "Verdana", sans-serif;


 }


  


 a {


 color: #ddd;


 cursor: pointer;


 text-decoration: none;


 }


  


 a:hover {


 background-image: url("../img/link-bg.png");


 color: white;


 }


  


 #links, #header {


 font-size: 34pt;


 letter-spacing: -3px;


 }


  


 #links, #footer {


 text-transform: lowercase;


 }


  


 #header {


 color: white;


 }


  


 #footer  {


 font-size: 12pt;


 }


  


 #footer span {


 color: #ddd;


 } 

bw.css
css Code:
Original - css Code @import url("spacing.css"); * { font-family: "Georgia", "Times New Roman", serif; background-image: none; color: black; } a:hover { color: white; background-color: black; } .check { color: #006400; } #links a { margin-left: 30px; } #background { display: none; }

  

 @import url("spacing.css");


  


 * {


 font-family: "Georgia", "Times New Roman", serif;


 background-image: none;


 color: black;


 }


  


 a:hover {


 color: white;


 background-color: black;


 }


  


 .check {


 color: #006400;


 }


  


 #links a {


 margin-left: 30px;


 }


  


 #background {


 display: none;


 } 

Actually I had 4 files named the same as they were importing:
Code:
CSS

@import "header.css";
@import "menu.css";
@import "content.css";
@import "footer.css";

It took me a half hour to figure out why IE was loading and Firefox wasn't.

Hahaha, I am dumb. D-U-M-B, I mean D-U-N-C-E

Off to the corner with me...

Picture

What if someone only had two middle fingers? Would they raise both and then go piss on their shoe?

GEOGRAPHY :P

I'm bored, at least I'm getting paid for this post :P Hahahaha...

Hello,

I used to run a blog at vritti.net which I took down completely and am nearing the final steps in finishing off the new product. A peek can be had at what is coming at http://www.vritti.net/mt/main

I want to make 2 aesthetic changes to the main text area ? 1. Give the text some space to breathe in and 2. Encase the text rectangle in a rounded rectangle so that it gives something solid for the racquet (and other randomly generated images) to lean on.

I request you for this help. Thank you.



ciao,

abhi C

hi there!

i got some trouble in using div for my blog...
i think my problem is somewhere here...but i still can't figure out!
Code:

<!-- Content Box -->
<div id="content" style="width: 366; height: 393; font-family: tahoma; font-size: 8pt; color: #FFFFFF; font-weight: normal; z-index: 3; line-height: 14px; overflow: auto; position: absolute; left: 519; top: 117; background-color: transparent; border: 0px solid #000000 padding: 13px">
</div>
<!-- End -->

<!-- Menu -->

<div id="menu" style="width: 100px; height: 80px; 
border: 0px solid #000000; 
font-family: tahoma; font-size: 8pt; color: #ffffff; 
font-weight: normal; z-index: 3; line-height: 14px; 
text-align: justify; overflow: hidden; padding: 13px; 
position: absolute; left: 350px; top: 135px; background-color: transparent;">

<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 74px; length: 87px; background-color: "transparent"
onClick="document.getElementById('content').innerHTML=document.getElementById('rant').innerHTML" transparent">
<p align="center"><font color="#CC0099">:</font><font color="#FFCC99">: bLog :</font><font color="#CC0099">:</font
</div>

<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 74; height: 12" 
onClick="document.getElementById('content').innerHTML=document.getElementById('profile').innerHTML"
<p align="center" transparent"><font color="#CC0099">:</font><font color="#FFCC99">: profiLe :</font><font color="#CC0099">:</font>
</div>

<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 80; height: 14" 
onClick="document.getElementById('content').innerHTML=document.getElementById('shout').innerHTML"
<p align="center" transparent"><font color="#CC0099">:</font><font color="#FFCC99">: sHout oUt :</font><font color="#CC0099">:</font>
</div>

<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 74; height: 13" 
onClick="document.getElementById('content').innerHTML=document.getElementById('blogsters').innerHTML"
<p align="center" transparent"><font color="#CC0099">:</font></font><font color="#FFCC99">: bLogsters :</font><font color="#CC0099">:</font>
</div>

<div style="cursor: move; 
font-family: tahoma; 
font-size: 8pt; 
font-weight: normal; 
color: #ffffff; 
background-color: "transparent" 
onClick="document.getElementById('content').innerHTML=document.getElementById('info').innerHTML"
<p align="center"><font color="#CC0099">:</font><font color="#FFCC99">: bLog info :</font><font color="#CC0099">:</div>
<!-- End -->

<!--Content Proper -->
<DIV id=rant div class="blog" style="display:none;" >

<p align="left">

<Blog>
    <DateHeader>
[date]

<p align="left"><br>
  </DateHeader>
    
<b>[blog title]</b><br><br>
[body]
<DIV CLASS="exte">[extended entry]</DIV>
<DIV CLASS="extk">[extended keywords]</DIV>
</p>
      
<p align="left"> 
  <em><br>
</em>
 [author] grooved at
  <em> [time]</em><br>[comments] [permalink] <br>
      __________________________________________<br>

<p align="left"> 
  <br><br><br>
[comment data]</Blog>
<table width="98%" align="center">
<tr>
<td width="33%">[previous page]</td>
<td width="33%" align=center>[bloghome]</td>
<td width="33%" align=right>[next page]</td>
</tr>
</table>
</div>

you can check the rest of the code at my test page:

URL

thanks in advance!!!

I have a b2 evolution blog that I'd like to alter a bit. I'd like to be able to widen the area where the content is displayed so there isn't so much wasted space on each side. How would I go about doing this?

If you need to see the site:
http://www.foreverpurple.com/blog/crab_blog.php

Hi all,

Home Page.

Blog page.

Site CSS file here.

Hi all, could I get some help? There's a few things, and if we can do one thing at a time, I'd appreciate it.

Ok, item 1, and this is in Firefox. Have a look at the Home Page. Then, have a look at the Blog page. Notice on the Blog page that "Navigation" is a few pixels too far to the right, and also a few pixels low compared to the Home page. Why? They're in the same CSS class. I don't understand why the right side in the blog is off like this.

I'd appreciate any advice!

Thank you,

Chris

OK, first off from a bad experience on another CSS Forum , I will have to begin with a disclaimer:

The blog you're about to view is my original content. I did not steal this work. I did however use Photoshop brushes that were made by others to create my work. The credit is properly given to those people on my active blog.

The blog that I'm having CSS/HTML problems with is INCOMPLETE, so you will not see any credits their yet. It is NOT MY REAL BLOG. I change the template there about every month with new experiements.

It's sad that I have to take up so much time to write a disclaimer because too many people out their jump on the "YOU PLAGIARIZER - YOU DID IT" bandwagon. So, I was told by a very presumptious group of forum members to write a disclaimer in the future.

Whew! Now that I got that outa the way.........

I need help.

This is the site I'm having trouble with.

Main Index Template

Sidebar

Stylesheet

I've been working on this same template for a week now. I'm not the type to ask for help. I'm very stubborn and prefer to do things on my own because it's usually faster and easier. But now I'm tearing my hair out - not able to figure out what I'm doing wrong.

My blockquote is bleeding off the screen. I'll start with that for now. I've tried div's, widths, margins, paddings. Believe me, I've toyed with every possibility out there.

Not only that, but I can't tell you how many "CSS/HTML" (including the w3 schools) help pages I've read out there. None of them have supplied what I need to know to fix my layout.

If any of you have the slighest clue, please help. I'd really appreciate it!!

Looks fine in all other browsers (of course).

http://sports.theedgenews.com

For some strange reason the last half of the blog blows up in IE6 and IE7. It simply does not show up.

Why we don't know. When looking at the source code, it "gets" the whole page, it's just the last half is not rendered.
A copy of the css is here.
http://sports.theedgenews.com/css.css

If anyone has any ideas at all on what to do, it would be greatly appreciated.

Btw this is a design not made by me. I have become pretty familar w/ it for the blog but I have not written it.

Thanks for any help.