|
CSS - Custom Border
Hello, I'm working on converting my current table layout into strictly a CSS Layout . I've managed to get everything (layout wise at least...) displaying properly except for my right border. This is a small 30px x 1px drop shadow. I've been working with it for a few hours now, and I can't seem to get the image to even show up.
Here is my CSS code: Code:
#container {
background-color: #726554;
width: 791px;
text-align: left;
margin: 0 auto;
}
#top {
position: absolute;
top: 0px;
left: 0px;
width: 791px;
height: 145px;
vertical-align: top;
}
#content {
background: #726554 url(PHP/img/right.jpg) right repeat-y;
margin-top: 30px;
width: 496px;
text-align: left;
vertical-align: top;
float: left;
}
#content p {
color: #f1f1f1;
font-family: Tahoma;
font-size: 13px;
margin: 0 0 10px 12px;
}
#content .date {
display: block;
color: #ff9100;
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
}
#left {
vertical-align: top;
float: left;
width: 265px;
height: 671px;
}
#contact {
clear: both;
background: #726554 url(PHP/img/right.jpg) right repeat-y;
font-size: 13px;
font-family: Tahoma;
text-align: center;
}
I don't think you'll need any HTML code for this problem, but let me know if you do! Thanks in advance, Jason Similar TutorialsI've been wrapping my head around how to apply a border at the bottom of an image, using the following: .menupic:link { border-top: 0px solid #ffffff; border-right: 0px solid #ffffff; border-bottom: 0px solid #ffffff; border-left: 0px solid #ffffff; } .menupic:hover { border-top: 0px solid #ffffff; border-right: 0px solid #ffffff; border-bottom: 4px solid #ffffff; border-left: 0px solid #ffffff; } It works fine in Mozilla, but I just cannot get the hover to work in IE, unless the border is completely solid and 1px+ for all a: states (kinda defeats what I'm trying to do), and it also works if I add float:left/right (which also is no good, as that messes up my design). Anybody found a css work around this problem? Is it possible to specify a custom image for a border style? Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... Hi, This used to be my solution: Code: <table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'> But this only works well on IE - not Mozilla Now I want to use CSS: Code:
.results {
border: 1px solid #CCCCCC ;
}
Code: <table class='results'> --------------- The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't. If I specify Code: <td class='results'> for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping). Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration? Thanks a lot! I would like to set up a table with a different border than the cells inside it. Here's my code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
TD {border: 1px solid #ccc}
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different? How do you create an inner border around a table in css, rather than a "solid" border which creates a border line around the table on the outer half. The border needs to butt up against an image, rather than leaving a pixel space. This is the coder I have so far. Nothing big: Code:
.solid {
border: solid 1px #000000;
}
Thanks. Hi, I'm trying to make my own custom CSS for Internet Explorer to load when I visit the www.tv.com site. How do I go about making it domain specific? Is there an IE alternative to Firefox's @-moz-document domain("tv.com") method? I am new to coding so dont make fun of me or anything if this is stupid.. I'm coding my own tumblr right now, and it looks pretty good so far. I just dont know the code to make an image 'static' and stay at the top. If you take a look (hockey-lax-bro.tumblr.com/) you will see what i mean. The follow button and picture on the right 'follow' you wherever you scroll. Code: <div style="position:right;5px:top;25px">
<a href="https;||twitter.***/J_Harris012" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @J_Harris012</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.***/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div style="position:right;30px:top;55px">
<a href="http;||i42.tinypic.***/2ai0etj.***" target="_blank">
<img class="normal" src="http;||i46.tinypic.***/15o8nj9.***" alt="install theme" />
</a>
</div>
Thats the coding that i have right now ^^ (i had to change a few things because new members are not allowed to post links) what do i need to change to make the buttons stay at the top? Ive seen some sites using fonts i dont have on my computer how is this done and whats it called ? any help would be great. I'm making a site, and the guy I'm making it for says he wanted a more 'tough' font. So I downloaded a, 'tough' but still readable of course, font. The main page has an iframe, and the content in the iframe is where the text goes that has the tough font. Everything works when it's offline. But when I try uploading it, it's the old font. I even check the source and it's all old. The server is running extremely slow right now, so that might be the problem and it just hasn't uploaded yet or something. Because I also deleted the content files and refreshed the page and it was still old. So, I'll wait a little longer and check or something. I also know that viewers can't see custom fonts if they don't have them on their pc. So this is kind of seeming pretty pointless. But is there ANYWAY I Can make it viewable to everyone that views the site. So they can see the font even if they don't have it on their pc. Like, make them have it temporarily or something. My friend told me it had something to do with CSS, but I don't really know. Anything I can do to make it work? Is there maybe a Java Script I can use? Can I use custom fields in IE or not? This is the complete example page I'm working with: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="http://localhost:9080/garage68/">
<title>TestCSS</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #00FF00;
background-color: black;
}
.content {
position:absolute;
width:75%;
margin:5px 0px 0px 165px;
border:0px;
line-height: 20px;
z-index:3;
}
fieldset {
border: #26a solid 1px;
width: 85%;
margin-bottom: 5px;
}
header {
font-weight: bolder;
color: blue;
}
date {
font-weight: bolder;
color: red;
}
-->
</style>
</head>
<body>
<version>version: 3.1.0</version>
<div class="content">
<fieldset>
<date>2004-05-04</date>
<hr />
<header>Title1</header>
And Entry
</fieldset>
<fieldset>
<date>2004-01-21</date>
<hr />
<header>Title 2</header>
A Second Entry
</fieldset>
</div>
</body>
</html>
You'll see the difference taking a look at it in IE versus Firefox. It seems like it's picking up some things (even from the custom tags) but leaves off other things. How can I get these two pages to look the same (as in both look like the firefox version)? I was wondering if there was a way to have a chapter listing in a OL or UL. I want to be able to have "Chapter <i>:" as the list style where <i> is the increment. is this possible. I thought I saw that somewhere floating around, but i can't seem to find it. thanks in advance. I have a question. If i create a custom class : p.q {color: black !important;} and a user has a css with the fallowing code: p {color: red !important;} will my text <p class="q">My text</p> be red or black and how can i prevent the user css from overriding my css to start: this is my first post and i hope this forum is as helpful as the others i am a member of.. i have a basic text game i am working on and code is already layed out for me.. but i am looking to give the game my own style.. i have created the look i want in photoshop and sliced and sent over to dreamweaver but i am a noob and dont know how to get the things functioning.. at all pretty much everything can be set as the background except for the form but i want the blue gradient in input fields and images as buttons. i would like to have big font size in boxes and also have white letters.. also i want the whole centered x and y when viewer goes to page like i said: im a noob and just getting back into the web dev stuff and am pretty rusty so if anyone can help me out i will be SOOOOOO thankful!!! here is the link to the jpg.. let me know if you need the psd but i have 2 or 3 dif fonts in it that are not common fonts Code: http://i951.photobucket.com/albums/ad353/zac_exuro/Untitled-1-2.jpg as seen in this forum when posting a message, i was wondering how they get it so that the title of a section appears inside the border? example: ------ Title here --------------------| | | | bit of content | | | | | ------------------------------------- I am working on a project in which users will be able to sign up for a program, lets compare it to a myspace page... and they can customize the look and feel of that page to a very limited extent. What is the best way to have them choose colors of the page through CSS, have those changes be there always applied to their page and their page alone? I don't need help with the implementation, I currently have it to where users can choose from pre-built stylesheets and those are used, but how do you set it up to where what options they choose in the setup wizard are then creating a new stylesheet just for that user on the fly? Thanks a ton, SS I'm creating a box that should be able to be scaled by either setting the size of the element containing the box, or the box itself. Here is the HTML: html4strict Code: Original - html4strict Code <div id="container1"> <div id="panelBox1" class="panelbox"> <div class="header">My Panel Box</div> <div class="content"> <div>Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box</div> </div> </div>
The CSS: css Code: Original - css Code div.panelbox { background: transparent url("Styles/Default/Images/panel_box_head_left.gif") no-repeat left top; padding: 0px; margin: 0px; } div.panelbox div.header { background: transparent url("Styles/Default/Images/panel_box_head_right.gif") no-repeat right top; line-height: 24px; margin-left: 3px; font-size: 0.8em; font-weight: bold; padding: 0px; } div.panelbox div.content { border: solid 1px #b3b3b3; margin: 0px; padding: 2px; height: 100%; } div.panelbox div.content div { width: 100%; height: 100%; overflow: auto; } #panelBox1 { height: 100%; }
The content element should take up the remaining space left by the the header. How can I ensure that the height of the content is 100% of the box minus the height of the header? When i add sifr to my site i am experiencing the following problems 1. Some elements disapear. ( the date componet ) 2. theres a space at the start of each para. 3. text justify is not being applied. u can see both the pages here http://harshamv.com/test.php the original page with out siFr http://harshamv.com/index.php Is there any way to add fonts to the web design better than this ? hello, i'm placing a custom cursor on a stylesheet like so: body { cursor: url(normal.cur), default; } and a weird effect appeared on internet explorer... when the cursor is over any layers or images (i guess, over any actual elements), the custom cursor appears. but when it's on an empty area, say the page background, the default cursor appears instead. how can i fix this (while trying to maintain the default cursors for every other browser)? thanks for any help! |
|||||||