CSS Combat - CSS-Tricks Forums

Nav bar in google search

Jeager — Fri, 24 Jun 2011 17:10:04 -0400

Never looked into it, but when you google search whatever, say css-tricks, and the nav bar appears below the link, (videos, snippets, ect). How does one go about doing it?

Help Centering Blog

janethread — Fri, 24 Jun 2011 12:27:19 -0400

Hi All,
I am brand new to CSS, and need some help with my new blog, that I'm creating using Weebly. I've been doing all of my work on a mac. When I view my page on the mac, it looks perfect; however, when I veiw it on a PC, it is totally off center--the background, header, text and navigation. I've looked at it on three different PCs, and it looks different on each one (all off center). I'm not sure what I'm doing wrong.
Can anyone help? I'm pasting the CSS code below. I would be forever grateful if someone could help me figure out what's what!
Thanks in advance :)

*|* {
margin:auto;
padding:auto;
}
body {
background-image:url('background redo 19.jpg');
background-position: center-center;
background-attachment: fixed;
background-repeat: no-repeat;
margin: 0pt auto;
padding: auto;
min height: 100%;
min width: 1183pix;
max width: 1183pix;
}
p {
line-height:1.5;
}
h1, h2, h3{
line-height:1.5;
}
#wrapper {
width:100%;
margin:0pt auto;
}
#contents {
width:80%;
margin:0pt auto;
}
*html #contents {
width:1183px;
}
#header {
background-image:url('logo 100.png');
float:center-center;
width:900px;
height:289px;
text-align:center;
margin:0pt auto;
}
#sitename {
position:relative;
float:left;
padding-top:25px;
font-family:"times new roman",garamond, serif;
color:#333333;
font-size:2.5em;
text-align:center;
}
#navigation {
float:left;
background: transparent url(nav_background.jpg) no-repeat center top;
float:center;
width:960px;
height:40px;
margin:0 auto;
font-family:"lucida sans", arial, sans-serif;
font-size:1em;
}
#navigation ul {
float:left;
padding-left:20px;
padding-top:12px;
margin-left:0px;
width:940px;
height:28px;
}
*html #navigation ul {
margin-left:-12px;
}
#navigation li {
float:left;
display:inline;
font-size:1em;
padding:12px 20px 13px 20px;
margin-top:-12px;
height:15px;
}
*html #navigation li {
margin-right:4px;
}
#active {
float:center;
background: transparent url(activetab_background.jpg) no-repeat center top;
color:#fff;
text-align:center;
}
#navigation a:link {
color:#fff;
text-decoration:none;
}
#navigation a:hover {
color:#fff;
text-decoration:none;
}
#navigation a:visited {
color:#fff;
text-decoration:none;
}
#active a:link {
color:#fff;
text-decoration:none;
}
#active a:hover {
color:#fff;
text-decoration:none;
}
#active a:visited {
color:#fff;
text-decoration:none;
}
a:link, a:hover, a:visited {
color:#198bef;
font-weight:normal;
text-decoration:underline;
}
#main {
clear:both;
width:920px;
min-height:400px;
height:auto !important;
height:400px;
padding:30px 20px 30px 20px;
}
img.image-left {
margin-right:15px;
float:left;
}
img.image-right {
margin-left:15px;
float:right;
}
#footer {
float:left;
width:960px;
border-top:1px solid #000000;
margin:0px 0 30px 0;
}
#footer-contents {
float:left;
color:#000000;
font-family:"lucida grande", "lucida sans", arial, sans-serif;
padding:15px 0 0 20px;
width:940px;
height:28px;
}
*html #footer-contents {
margin-top:-5px;
}
input {
background-color:#fff;
border:1px solid #999;
font-size:12px;
}
textarea {
background-color:#fff;
border:1px solid #999;
font-size:12px;
}

CSS buttons using box-reflect

joshuanhibbert — Thu, 23 Jun 2011 07:16:00 -0400

Saw this post on Forrst (must be a member to view) and it inspired me to create this using CSS.

Any improvements you can think of?

Splash site review - also

tannercampbell — Wed, 22 Jun 2011 14:02:56 -0400

If you're interested in watching the show when it starts airing (after all the episodes have been recorded) sign up :) we're working really hard on it.

Okay now, REVIEW PLEASE!

http://wonderfulworldofbeer.com

Problem with dropdown menu only in IE7 for joomla site

ctecha — Mon, 20 Jun 2011 09:09:43 -0400

Hi everybody,

New to the forums here. Having a problem with a dropdown menu in IE7 that appears underneath everything else on the page. It only happens in this browser and not the others. I've tried a lot of different things with position relative and z index and I can't seem to figure out how to make the menu appear above the content. In Firefox and even the other IE browsers you can see that the menu appears like it should but in IE7 it shows underneath. Any idea on how to fix this problem?

Thanks for your help

Alex

CSS3 linear gradient to repeat on the y axis

cmaccss — Tue, 21 Jun 2011 18:07:32 -0400

Hello everybody, I'm new to this forum but have been following Chris and his tutorials for a while now.

Dose anyone know how to get a linear gradient to repeat on the y axis?
its the color #38a5d3 that I'm trying to get to repeat on the y axis

background-image: -moz-linear-gradient(top, #164570,#38a5d3); background-image: -webkit-gradient(linear, top, bottom, color-stop(0 #164570)(0,#38a5d3));}

thanks for your

Jquery vs CSS

pzh20 — Wed, 22 Jun 2011 13:11:21 -0400

I have spent many years slowly picking up tips and tricks for using CSS and although I'm not a very active web developer, I can usually achieve most of what I need with a few google searches.

This and other sites advocate Jquery as another technology to use, so recently I started an online tutorial, and it looks great. However, I'm becoming rather confused as to when to use JQuery and when to code CSS.

What is the best approach? When should I use CSS and when does Jquery do best?

Many thanks
Pete

IE 6, 7, bugs - A guide to deal with them!

isra26 — Tue, 21 Jun 2011 17:46:29 -0400

I'm a Web Design and developer student, and I wonder with so many issues on IE 6 and 7, (just to start) has anyone came out with a book or a guide to deal with all these issues?. Seems like most designers spent a good deal of time researching solutions on the web to deal with this issues.
Any ideas where to find a concise guide or a site that helps designer's deal with IE's issues all in one place?

Thanks.

center page

chanman — Wed, 22 Jun 2011 13:49:24 -0400

Tell me what I need to do to center this page in all browsers.
website

Some help with conditional statements

tannercampbell — Wed, 22 Jun 2011 11:20:30 -0400

Hey all,

I need some help with some IE conditional statements - I don't really use them, and frankly I don't really understand how they work.

http://wonderfulworldofbeer.com

This seems to work fine in all browsers excepts IE6 and IE7 - on a previous post someone suggested using conditionals to address the issue of alignment with the form field, button, and the pre-loaded JQuery "your email address here" bit. But I don't know how to do that. Could someone give me the answer to this, and maybe with that answer explain a little bit about conditional statements?

Thanks!
Tanner
(I know there are errors in the validator -- they all seem to have to do with the Google fonts API)

Helvetica Neue problems

bangbang — Sun, 02 Aug 2009 11:27:13 -0400

Hello,
here is my problem:
i have both mac and windows machines, and both have full serie of helvetica font.
of course as expected, there is no problem on the mac :)
but on the pc, if i visit a website that have 'Helvetica Neue' as default font, all browsers (except safari) are showing what i believe is Helvetica Neue CONDENSED instead of normal, and it make the whole text almost impossible to read.
this is particularly annoying as i cant really test my css on the pc if i use that font.

so i was wondering if it is a problem on my machine, or everyone with the helvetica font for pc got that problem ?
i really hope its only me, otherwise all those nice looking websites on mac would look horrible on every pc with helvetica

Firefox 4 Error

seanroberts — Fri, 17 Jun 2011 13:28:35 -0400

Hello guys, I am trying to diagnose a problem with a navigation bar. The site is http://www.divers-supply.com

It works fine in all of my browser testing. However, I just built a new 64 bit computer and with FF4 It is dropping down the last "li" "Shop By Brand" . I am wondering if this is just a css error or if its a browser setting issue. My zoom is reset and my font size is set to allow the webpage to dictate how big the font-size is. Any ideas?

Soon to be launched..Needing Critiques

Adman — Sun, 19 Jun 2011 23:40:00 -0400

Hey all I need your assistance. I'm working on a website for a buddy of mine. It's been a long time coming (pro bono) and just losing focus. I used to like the layout, but now it seems a bit blah. I would like to hear your critiques on things that I could do to improve them? I think what may be hindering the design is that it's pretty basic. Granted this type of site is going to be an informative one, but would like your feedback.

The C3 Source

One thing on the corvette page, I am playing around with images as color swatches. I have used CSS3 to make them pop-out, however I don't like how it has to basically load a part of it when it's fully loaded (did that make sense?)

Thank you for your time!

-Adam

Hide text with *** but visible on selection.

Nahuel — Wed, 22 Jun 2011 09:17:00 -0400

A friend of mine needed to do this in order to show a "secret message" on his website. The idea is simple, a text would show up like "****" but you would se the real text when you select it. Sort of like when you use the same text color as in the background, but cooler.

You think this is possible to achieve with CSS? Or even with JS?

Web Font padding issue

closeyetfar — Wed, 22 Jun 2011 13:24:12 -0400

I am having an issue with extra padding on my global nav bar. The issue is only in FireFox 3.6-5 (Mac only) and IE9. I am using webfonts for my global nav and the dropdown menu under ASK A LIBRARIAN gets pushed over to the left about 2 pixels. In all other browsers it lines up on the right. I think it might be the WOFF font rendering. But I could be wrong. Any ideas on how to fix would be great.

Here is a URL example: http://libweb1.lib.buffalo.edu/main/news/index.html

Looks fine in IE7, IE8, Chrome (Mac & PC), FireFox 4 (PC only) and Safari.

Possible CSS3 question...Insight wanted

Thadley — Tue, 21 Jun 2011 12:43:59 -0400

What's up fellow web people :)

I got a question regarding skewing 'divs' if you will, rather than having a image. Here is an example of what I mean, Look at the header graphic.

You see how the purple is skewed and then the blue is also skewed the same way. Can you achieve this with possible CSS or CSS3 to save using an image? Targeting a specific side and then 'skewing' it?

Just a question that struck me as interesting and if anyone has cool ideas how to accomplish this, then by all means, share :)

CSS Columns Problem

Brightonmike — Tue, 21 Jun 2011 04:31:40 -0400

I'd really like to use columns on a music site of mine. I've tinkered about using Dev Tools and I think I know how I'd like it. However, there is a problem.

The problem is using columns forces the posts to break in half if they don't perfectly fit, height wise. This means if you're reading the site, you'd have to keep scrolling up and down - very annoying. That's also my main general gripe with columns, they force you to scroll.

http://i52.tinypic.com/fk9vh4.jpg

That shows you what I mean...

Is there anyway to do it so it isn't cutting posts in half like that?

Wordpress - Simple Newsletter Subscription

CrownOfMars — Wed, 22 Jun 2011 04:30:48 -0400

Does anyone out there know a simple newsletter subscription plugin?

I've looked everywhere and they all seem way too complicated for what i'm looking for.
I want to give users the opportunity to hit a simple "Newsletter (Subscribe)" button, and if they do, their email (the one they registered originally with) is listed in the back-end.

Thanks!

[Solved] Aligning an Image to the Centre

Glenbot3000 — Tue, 21 Jun 2011 12:29:29 -0400

A bit of a rudimentary question, but I am a rookie after all. :3

So yeah, how can I align an image I have to the centre of the page (on all resolutions/browsers)?

Transform not working in Chrome 12

jimdavis — Mon, 20 Jun 2011 15:27:00 -0400

Cant seem to get any transforms working in Chrome 12. Works in all other modern browsers. Link to test page: http://jimdavis.org/transtest1.html
What am I missing?

(X)HTML 5 "hybrid"

krysak4ever — Mon, 20 Jun 2011 14:05:42 -0400

hi,

what do you use more?

XHTML 1.0 = "div + id" mess but looks cool in every browser
HTML 5 = clean and neat yet depends on .JS

I am using HYBRID of sort
best techniques and clean coding, nesting, quoting values, I learnt from XHTML in combination with and neat short versions of script, style, meta avoiding for now new elements like header, footer, nav, article, section, ...

created projects in HTML5 and simply love it
but sad truth to be told, if .JS is turned off, layout is killed (some parts)

2 backgrounds css

intodesign — Fri, 03 Jun 2011 16:26:28 -0400

Howdy,

I'm trying to use this syntax which it's works in FF :


background:url(images/bg.jpg) no-repeat top, url(images/bg2.jpg) repeat;

But doesn't seem to work in IE,
Any suggestions?

Detecting browsers without transparency capability

Jeager — Fri, 03 Jun 2011 14:13:35 -0400

Is there a way that I can use normal rgba transparency's for something, and have some kind of detection that it will use a transparent image in its place if the browser does not support it?

Problem with the div thing

kayliu — Mon, 20 Jun 2011 22:02:09 -0400

I am a newbie of making web and using css. Currently making my first css site. Somehow the green box(I just make it green so you guys know what I am talking about) thing appeared and blocked my path to success. Anyone know what I did wrong on the coding? I wanna remove that green thing, thanks all.

here is the site. http://dl.dropbox.com/u/5594714/index.html

Uploading Video.. Best Way?

CleanUP_CharliE — Mon, 20 Jun 2011 18:52:15 -0400

I've been wanting to design websites for quite some time and just recently took the plunge.

I have been formulating questions as the website evolves, and now i want to know what would be a nice way to upload a video.

2nd time around CSS-Tricks, i see that a lot of people follow it ;)

The video is 45MBs in size by the way. Some websites have Youtube as their "hosting" technique. I really do not want that.

Is it a thing of just inserting the video directly into DreamWeaver and that's it, or can i apply a 'Play' and 'Pause' button, etc, and modify some stuff?

Thanks.

CSS Button Links

cascademultimedia — Mon, 20 Jun 2011 17:08:14 -0400

Hi,

The buttons on the menu bar on my website aren't linking like I have them set to. I'm guessing that I am missing something within the CSS?

Thanks for your help!

A little question about css and altering the way links look

furrball1383 — Sun, 19 Jun 2011 04:39:18 -0400

Hello, I've just set about designing a webpage for myself and have hit a snag in my design. basically for the navigation i have made block elements with pictures in the background and the link text on top however the link text is up at the top of the block and i need to move it down to the bottom. I know this might seem silly but could someone help me figure it out?

Webkit transform problem (SAFARI)

syron1988 — Mon, 20 Jun 2011 11:54:50 -0400

Hello guys!

I've been searching google the whole day for finding a solution for my problem and I found 1 article at apple support, but they did not get it solved, so I am asking here cause I know some great developers are here!

My problem is as followed:
I have a list of div:s, the first div has an id #post, this #post should, only in safari, make a 180 degree transform and change the content of the div. That means it is like a card with a front and a back side.

It works on chrome, except the background, which gets kinda laggy while flipping, but that's not a concern since chrome will not be supported for the flip.

The problem I have is, that after the flip, safari gives opaque 0 (not in real css) to the content of it. I can highlight the text with my mouse, unable to see it, but with CTRL + c I can copy and +v paste it. So it is existing at correct position, but not showing... I hope you understand my problem.

My code is as followed:

#scroller is the basic container of all div:s I talked about at the beginning.

CSS

#scroller {
	-webkit-perspective: 2000;
}
.block {
	z-index: 99;
    position: position;
    -webkit-transform-style: preserve-3d;
	transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
}
.rotated{
    -webkit-transform: rotateY(180deg);
}
.side{
	-webkit-backface-visibility: hidden;
}
.front{
			z-index: 900;
	-webkit-transform: rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
}
.back{
			z-index: 800;
			-webkit-transform: rotateY(-180deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;
 
}
.back p {
	background-color: white;
	color: black;
	opacity: .5;
}

PHP Code


            
                
                    

                    
                

                
                    /images/page_turn.png" />
                

            

            
                
                    
                

                
                    /images/page_turn_back.png" />

And the javascript toggle function:

$("#post .post_more a").click(function() {
				if(document.getElementById("post").className == "block"){
					document.getElementById("post").className += " rotated";			
				}
				else{
					document.getElementById("post").className = "block";
				}
			});

Does anyone know what Im doing wrong?

Thanks in advantage.

Mobile Styles & !important

Brightonmike — Fri, 17 Jun 2011 05:46:59 -0400

I'm working on the mobile styles for a site.

They only apply when I re-size the browser to mobile size when I use !important. If I take !important away, they have no effect.

Is this normal? It doesn't seem so.

Navigation Bar Help! :)

ramit — Sat, 04 Jun 2011 03:00:01 -0400

can anyone help me if how a navigation same as this is created ? Site of Kunal C.

A reply would be much appreciated :)