|
|
Q&A With A1 ANGKOR Web Designer
|
|
1 Question, Best Question by customer |
 |
|
|
|
|
|
|
1 answer, Best answer by A1 ANGKOR TEAM |
|
|
|
 |
A1 |
• I recommend the excellent
IEcollection - in my opinion this is the best (by
far) IE emulation app around.
But that's still not perfect unfortunately and
occasionally doesn't show a bug that true IE would show,
or shows a bug that true IE wouldn't show.
The best way, and the only was affair without having
three development PCs (one for IE6, one for IE7 and one
with a normal browser on it) is to run a virtual machine
for each IE that you want to test in. VM's are easy to
set up and use and will allow you to run the true
versions of each IE that you need to test...
• Nothing beats the actual browser for testing issues
with JavaScript but if you are just interested in visual
then try Adobe's solution:
Browser Lab
 |
|
|
A2 |
• I hate to use such a vague subject line, but I don't
know how else to describe this. Firefox has some sort of
glitch, at least for two of us in the office, where it
is not calculating the position of a CSS-based drop-down
sub-menu properly. It's overlapping the top-level menu.
Strangely, if you right-click on the element, they all
snap into their correct positions.
You can see the site at http://dev.ntorus.com:6596/.
Here's the relevant CSS:
#mainNav
{
text-align: right;
margin-right: 20px;
padding: 50px 0 20px 0;
margin-top: 0;
}
#mainNav li
{
list-style-type: none;
display: inline;
font-size: 17px;
font-weight: bold;
margin-left: 8px;
margin-right: 8px;
letter-spacing:-.05em;
position: relative;
}
#mainNav a
{
color: #7C99C1;
}
#mainNav a:hover
{
color: #083f88;
}
#mainNav ul
{
visibility: hidden;
width: 200px;
display: block;
position: absolute;
margin-top: 0;
right: 0;
padding-top: 8px;
}
#mainNav ul li
{
font-size: 12px;
display: block;
}
#mainNav li:hover ul, #mainNav ul:hover
{
visibility: visible;
}
|
|
|
A3 |
• I am designing a website based on the free template -
FreshMade Software Template.
I have copied the template to my PC, and now I am
customizing/modifying it to my needs.
The problem I am having is that I can't get the
navigation menu at the top to be centered. In the
template it is left-aligned. I want the menu to be
aligned in the center of the brown navigation bar,
without affecting any other formatting. All attempts to
do so have failed. I have decent HTML and CSS knowledge,
but I'm definitely no expert.
I've managed to center the menu using Dan's advice:
ul.tabbed
{
margin: auto;
padding:0;
width:650px;
}
However, my menu is dynamically created, so I would need
to set the width property dynamically via JavaScript.
How would I go about this using Query?
I was thinking of setting each menu item to be a fixed
width (say 100px) and then setting the width of
ul.tabbed to be X * 100px where X is the number of list
items in the unordered list.
Is this the right approach, and how would one implement
it using Query?
• Is there going to be a fixed number of navigation
items? If so you can give the <ul> element a fixed
width, auto margins and block level display. The
following code centers the navigation menu in the
example page you've linked to:
ul.tabbed
{
margin: auto;
padding:0;
width:650px;
}
But you couldn't use that if the menu items were subject
to change, you'd need to involve some JavaScript for
that to calculate the width.
|
|
|
A4 |
• I have the following code that basically displays a
<button>, and inside the button two <div>s, one aligned
at the top-left corner of the button, the other aligned
at the bottom-right corner:
<html>
<head>
<style>
<!--
.button {
width: 300px;
height: 200px;
background-color: yellow;
position: relative;
padding: 0px;
}
.child_top_left {
position: absolute;
top: 5px;
left: 5px;
background-color: blue;
}
.child_bottom_right {
position: absolute;
bottom: 5px;
right: 5px;
background-color: red;
}
-->
</style>
</head>
<body>
<button
class="button">
<div
class="child_top_left">top-left</div>
<div
class="child_bottom_right">bottom-right</div>
</button>
</body>
</html>
It all works fine in IE 7 or Safari, but in Firefox
something is displayed strangely. It looks like Firefox
considers that the 'top' of the button is actually
located at the middle of the button.
I tried setting the doctype to transitional, but no
change.
Anyone encountered this behavior? Maybe there is some
workaround for it?
• buttons are special elements, and it looks as if
Mozilla is vertically centering the textbox and using
that as its positioning.
I found a workaround for you:
.button {
width: 300px;
height: 200px;
background-color:
yellow;
position: relative;
padding: 0
0 200px
0;
}
padding the bottom of the box with the height of the box
appears to force firefox to render the contained
elements where you wanted them.
• Would you be better off doing something like this?
<input type="button"
value="Foo"
id="bar"
/>
|
|
|
A5 |
• Can I use a CSS
(or other) technique to round the corners of an image,
or do I actually have to round the corners of the image
in an image editor?
• You can style a div with
rounded corners and simply apply the image as the
background.
<div style=" width:80px; height:80px;
-moz-border-radius:8px; -webkit-border-radius:8px;
border-radius:8px; background-image:url('http://gravatar.com/avatar/0c5517f0ac2d435fa0927672e3d4f40b.png');">
• However, this only works in browsers that support
rounded corners via CSS, so actually rounding your
images is always the best way of ensuring the visual
output.
• I'd go with Gary's suggestion.
|
|
|
A6 |
• Hi, I am
trying to create a nested table in my HTML document.
I've made 1 of 3 but I don't know how to insert the next
table. It seems logical to create a new table tag and
start a new table but because I need a nested table that
doesn't seem to cut it. I guess the nested table thing
is throwing me off. Can someone give me some pointers or
point me to a reference for writing a nested table? Any
help would be appreciated.
Here's what I have written so far:
<?xml
version="1.0"
encoding="UTF-8"
standalone="no"
?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<img
src="j0182695_downsized.jpg"
alt="Oatmeal
Raisin cookies"
style="float:
left"
>
<title>
Cameron Cookies </title>
</head>
<body
background="back-225.gif">
<h1
style="text-align:
center;
color:
red;
font-family:
Arial,
Helvetica,
sans-serif;">Cameron
Cookies</h1>
<h2
style="font-style:
italic;
text-align:
center;">The
best homemade cookies in New England</h2>
<p
style="text-align:
center;">99
Sycamore St. Portland, ME 04101 (207) 555-1212</p>
<table
width="500"
border="0">
<tr>
<td
align="center"><a
href="about.htm">About
Us</a></td>
<td
align="center"><a
href="mailto:cookiemaster@cameroncookies.com">Contact
Us</a></td>
<td
align="center"><a
href="orderform.htm">Place
an Order</a></td>
<td
align="center"><a
href="recipe.htm">Sample
Recipe</a></td>
</tr>
</table>
<form
name="Web
Order Form"
id="Web
Order Form">
<table
border="0"
cellpadding="2"
width="65%">
<tr>
<th>Personal
Information</th>
</tr>
<tr>
<td>First
Name:</td>
<td><input
name="fname"
id="fname"
size="30"
type="text"
/></td>
</tr>
<tr>
<td>Last
Name:</td>
<td><input
name="lname"
id="lname"
size="30"
type="text"
/></td>
</tr>
<tr>
<td>Address:</td>
<td><input
name="address"
id="address"
size="30"
type="text"
/></td>
</tr>
<tr>
<td>City:</td>
<td><input
name="city"
id="city"
size="35"
type="text"
/></td>
</tr>
<tr>
<td>State:</td>
<td><input
name="state"
id="state"
size="3"
type="text"
/></td>
</tr>
<tr>
<td>Zip
Code:</td>
<td><input
name="zip"
id="zip"
size="10"
type="text"
/></td>
</tr>
<tr>
<td>Country:</td>
<td><input
name="country"
id="country"
size="10"
type="text"
/></td>
</tr>
</table>
</form>
• You would just start up another table like normal
except start it inside of a TD tag, like so:
<table>
<tr>
<td>"parent"
table</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>nested table</td>
</tr>
</table>
</td>
</tr>
</table>
• You can nest a table by inserting it as the child of
another <td> element, like this:
<table border="0"
cellpadding="0"
width="300">
<tr>
<td
width="100">A
normal cell</td>
<td
width="200">
<table border="0"
cellpadding="2"
width="200">
<tr>
<td>A cell in a nested table</td>
<tr>
</table>
</td>
<tr>
</table>
That is obviously a much simplified example, but it's as
easy as that.
However, unless that's mark-up intended for an HTML
email you shouldn't use tables for layout like that.
Tables are for tabular data.
Your navigation would be much better as an unordered
list element, like this:
<ul>
<li><a href="about.htm">About
Us</a></li>
<li><a href="mailto:cookiemaster@cameroncookies.com">Contact
Us</a></li>
<li><a href="orderform.htm">Place
an Order</a></li>
<li><a href="recipe.htm">Sample
Recipe</a></li>
</ul>
This form should be coded like this:
<form name="Web
Order Form" id="Web
Order Form" action="server_side_filename.php"
method="post">
<h3>Personal
Information</h3>
<label
for="fname">First
Name:</label>
<input
name="fname"
id="fname"
size="30"
type="text"
/>
<label
for="lname">Last
Name:</label>
<input
name="lname"
id="lname"
size="30"
type="text"
/>
<label
for="address">Address:</label>
<input
name="address"
id="address"
size="30"
type="text"
/>
<label
for="city">City:</label>
<input
name="city"
id="city"
size="35"
type="text"
/>
<label
for="state">State:</label>
<input
name="state"
id="state"
size="3"
type="text"
/>
<label
for="zip">Zip
Code:</label>
<input
name="zip"
id="zip"
size="10"
type="text"
/>
<label
for="country">Country:</label>
<input
name="country"
id="country"
size="10"
type="text"
/>
</form>
Also, the <img> shouldn't be in the <head> of the page,
the <head> should only contain meta tags, links to
stylesheets and/or other resources such as a favicon,
the <title> and occasionally <script> elements (although
these should really go at the end of the <body>)
|
|
|
A7 |
• I'm trying to
get these nice skinned .xspf jukebox music players to
work cross browser. Yesterday they worked on my Mac
browsers, but not in my IE PC browsers. Today, after
switching to the ostensibly more cross-browser friendly
swfobject flash embed method, it's the other way around.
IE loves me and loads the playlist, FF and Safari on Mac
will display the empty skin, no playlist.
Ideally I'd like to have three different players on this
page by the time I'm through.
Oh, and I can't get that stupid dragon to lay down
underneath my content like a good background graphic
either, but I suppose that's another question.
Anybody see where I'm going wrong?
|
|
|
A8 |
• How would
someone have a picture for the background of their page?
Wouldn't it be to cut out if a person with a small
screen visited the page?
Check out this jQuery plugin called
MaxImage. It resizes the background image to fit the
browser. Window
|
|
|
A9 |
• Well, I'm at my
wits end. If you look at my link, you'll notice that in
IE 6 and 7, the links that overlap the absolutely
positioned background divs (e.g. all the animal links)
are not hot (they neither execute the rollover nor
display a pointer or link to anything). No amount of
z-indexing seems to resolve the problem. What have I
done?
The problem not only exists in IE6/7, but all other
modern browsers too.
The main reason is the z-index of div.bg-lyrics-snake
having higher value than the div.content. Hence it
becomes a mask rather than a background. I suspect any
z-index specified within 'div.content' will be
z-positioned within the child of div.content.
For the background I suggest swapping the texture
background for div.container with div.bg-lyrics-snake,
OR place div.bg-lyrics-snake inside div.container.
|
|
|
;){kind=link}